/* Control de Misión — estilos. Tokens tomados del prototipo (docs/prototype). */
:root {
  --c-texto: #12222B;
  --c-texto-2: #4A5A63;
  --c-texto-3: #7A8A93;
  --c-fondo: #FFFFFF;
  --c-fondo-app: #F6F8FA;
  --c-borde: #E6ECEF;
  --c-borde-suave: #F0F4F6;
  --c-marca: #008BC8;
  --c-marca-oscura: #0077AB;
  --c-marca-suave: #E0F1F9;
  --c-ok: #1C6E47;
  --c-ok-suave: #E4F0EA;
  --c-alerta: #A06A0C;
  --c-alerta-suave: #F9F1E2;
  --c-error: #B3261E;
  --c-error-suave: #FBEAEA;
  --c-neutro-suave: #F2F6F9;
  --f: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --r-s: 6px; --r-m: 9px; --r-l: 12px;
  --w-lateral: 272px; --h-cabecera: 56px; --w-chat: 720px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --c-texto: #E3EAEE; --c-texto-2: #A9B7BF; --c-texto-3: #7F8E97;
    --c-fondo: #151C21; --c-fondo-app: #0F1418; --c-borde: #26323A; --c-borde-suave: #1D272D;
    --c-marca: #3BA9DB; --c-marca-oscura: #62BCE5; --c-marca-suave: #13303E;
    --c-ok: #5CC08C; --c-ok-suave: #16302A; --c-alerta: #E0A94A; --c-alerta-suave: #33291A;
    --c-error: #F08A80; --c-error-suave: #3A1E1D; --c-neutro-suave: #1A2328;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--f); font-size: 14px; line-height: 1.5; color: var(--c-texto); background: var(--c-fondo-app); }
a { color: var(--c-marca-oscura); }
button, input, select, textarea { font: inherit; color: inherit; }

.shell { display: grid; grid-template-columns: var(--w-lateral) 1fr; min-height: 100vh; }
.lateral { background: var(--c-fondo); border-right: 1px solid var(--c-borde); display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; }
.marca { height: var(--h-cabecera); display: flex; align-items: center; gap: 10px; padding: 0 16px;
  font-weight: 700; border-bottom: 1px solid var(--c-borde); text-decoration: none; color: var(--c-texto); }
.marca .logo { width: 26px; height: 26px; border-radius: 7px; background: var(--c-marca); color: #fff;
  display: grid; place-items: center; font-size: 13px; }
.lateral nav { padding: 12px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; flex: 1; }
.lateral .grupo { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--c-texto-3);
  margin: 14px 6px 4px; }
.nav-item { display: block; padding: 7px 10px; border-radius: var(--r-s); text-decoration: none; color: var(--c-texto);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-item:hover { background: var(--c-neutro-suave); }
.nav-item.activo { background: var(--c-marca-suave); color: var(--c-marca-oscura); font-weight: 600; }
.nav-item small { display: block; color: var(--c-texto-3); font-size: 11px; }
.pie-lateral { border-top: 1px solid var(--c-borde); padding: 10px 16px; font-size: 12px; color: var(--c-texto-3); }
.env { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 600;
  background: var(--c-alerta-suave); color: var(--c-alerta); }
.env.production { background: var(--c-ok-suave); color: var(--c-ok); }

.principal { min-width: 0; display: flex; flex-direction: column; }
.cabecera { height: var(--h-cabecera); background: var(--c-fondo); border-bottom: 1px solid var(--c-borde);
  display: flex; align-items: center; gap: 12px; padding: 0 20px; position: sticky; top: 0; z-index: 5; }
.cabecera h1 { font-size: 16px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cabecera .espacio { flex: 1; }
.btn.menu-movil, .velo { display: none; }
.contenido { padding: 24px 20px 40px; width: 100%; max-width: 1180px; margin: 0 auto; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px;
  border-radius: var(--r-m); border: 1px solid var(--c-borde); background: var(--c-fondo); cursor: pointer;
  font-weight: 600; text-decoration: none; color: var(--c-texto); }
.btn:hover { background: var(--c-neutro-suave); }
.btn.primario { background: var(--c-marca); border-color: var(--c-marca); color: #fff; }
.btn.primario:hover { background: var(--c-marca-oscura); }
.btn.ok { background: var(--c-ok); border-color: var(--c-ok); color: #fff; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.bloque { width: 100%; }

.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: var(--c-neutro-suave); color: var(--c-texto-2); white-space: nowrap; }
.badge.draft { background: var(--c-neutro-suave); }
.badge.interviewing { background: var(--c-alerta-suave); color: var(--c-alerta); }
.badge.plan_proposed { background: var(--c-marca-suave); color: var(--c-marca-oscura); }
.badge.sealed { background: var(--c-ok-suave); color: var(--c-ok); }
.badge.superseded { background: var(--c-neutro-suave); color: var(--c-texto-3); }
.badge.current { background: var(--c-marca-suave); color: var(--c-marca-oscura); }

.tarjeta { background: var(--c-fondo); border: 1px solid var(--c-borde); border-radius: var(--r-l); }
.vacio { text-align: center; padding: 48px 20px; color: var(--c-texto-2); }
.aviso { padding: 10px 14px; border-radius: var(--r-m); background: var(--c-alerta-suave); color: var(--c-alerta); }
.aviso.error { background: var(--c-error-suave); color: var(--c-error); }
.aviso.ok { background: var(--c-ok-suave); color: var(--c-ok); }
.oculto { display: none !important; }
.muted { color: var(--c-texto-3); }
.mono { font-family: var(--mono); font-size: 12px; word-break: break-all; }

/* ---------- listado ---------- */
.lista-sesiones { list-style: none; margin: 0; padding: 0; }
.lista-sesiones li a { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: center;
  padding: 14px 18px; border-bottom: 1px solid var(--c-borde-suave); text-decoration: none; color: var(--c-texto); }
.lista-sesiones li:last-child a { border-bottom: 0; }
.lista-sesiones li a:hover { background: var(--c-neutro-suave); }
.lista-sesiones .titulo { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- sesión ---------- */
.sesion { display: grid; grid-template-columns: minmax(0, var(--w-chat)) 320px; gap: 24px; justify-content: center; }
.hilo { display: flex; flex-direction: column; gap: 14px; }
.burbuja { padding: 12px 14px; border-radius: var(--r-l); max-width: 92%; white-space: pre-wrap; overflow-wrap: anywhere; }
.burbuja.user { align-self: flex-end; background: var(--c-marca); color: #fff; border-bottom-right-radius: 4px; }
.burbuja.assistant { align-self: flex-start; background: var(--c-fondo); border: 1px solid var(--c-borde);
  border-bottom-left-radius: 4px; }
.burbuja.system { align-self: center; background: var(--c-neutro-suave); color: var(--c-texto-2); font-size: 13px;
  text-align: center; }
.burbuja.error { align-self: stretch; max-width: 100%; background: var(--c-error-suave); color: var(--c-error); }
.burbuja .quien { font-size: 11px; opacity: .75; margin-bottom: 4px; font-weight: 600; }
.burbuja ol { margin: 8px 0 0; padding-left: 20px; }
.burbuja.revision { background: var(--c-alerta-suave); color: var(--c-texto); border: 1px solid var(--c-borde); }

.artefacto { border: 1px solid var(--c-borde); border-radius: var(--r-l); background: var(--c-fondo); overflow: hidden; }
.artefacto > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; background: var(--c-neutro-suave); border-bottom: 1px solid var(--c-borde); }
.artefacto > summary::-webkit-details-marker { display: none; }
.artefacto > summary .t { font-weight: 700; flex: 1; }
.artefacto .cuerpo { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.artefacto.sealed { border-color: var(--c-ok); }
.sello { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; background: var(--c-ok-suave);
  color: var(--c-ok); border-radius: var(--r-m); }
.sello strong { letter-spacing: .06em; }
.objetivo h3 { margin: 0 0 4px; font-size: 16px; }
.datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px 14px; font-size: 13px; }
.datos div span { display: block; color: var(--c-texto-3); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.mision { border: 1px solid var(--c-borde); border-radius: var(--r-m); }
.mision > summary { cursor: pointer; padding: 10px 12px; font-weight: 600; }
.mision > summary .kr { display: block; font-weight: 400; color: var(--c-texto-2); font-size: 13px; }
.mision .hitos { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.hito { border-left: 3px solid var(--c-marca); padding: 8px 12px; background: var(--c-fondo-app); border-radius: 0 var(--r-s) var(--r-s) 0; }
.hito .cab { font-weight: 600; }
.patas { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--c-texto-2); margin-top: 4px; }
.patas .pend { color: var(--c-alerta); }
.tareas { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.tareas > summary { cursor: pointer; font-size: 12px; color: var(--c-marca-oscura); }
.tarea { background: var(--c-fondo); border: 1px solid var(--c-borde-suave); border-radius: var(--r-s); padding: 8px 10px; font-size: 13px; }
.tarea .cab { font-weight: 600; }
.tarea .campos { display: grid; grid-template-columns: 130px 1fr; gap: 2px 10px; margin-top: 4px; font-size: 12px; }
.tarea .campos dt { color: var(--c-texto-3); }
.tarea .campos dd { margin: 0; }
.lista-notas { margin: 0; padding-left: 18px; font-size: 13px; }
.pie-artefacto { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--c-borde); }
.form-cambios { display: flex; flex-direction: column; gap: 8px; padding: 0 16px 14px; }

.redactor { position: sticky; bottom: 0; background: var(--c-fondo-app); padding: 12px 0 4px; margin-top: 10px; }
.redactor form { display: flex; gap: 8px; align-items: flex-end; background: var(--c-fondo); border: 1px solid var(--c-borde);
  border-radius: var(--r-l); padding: 8px; }
textarea { width: 100%; resize: vertical; border: 1px solid var(--c-borde); border-radius: var(--r-m); padding: 9px 11px;
  background: var(--c-fondo); min-height: 44px; }
.redactor textarea { border: 0; min-height: 44px; max-height: 240px; outline: none; }
.trabajando { align-self: flex-start; display: flex; gap: 10px; align-items: center; padding: 12px 14px;
  border: 1px dashed var(--c-borde); border-radius: var(--r-l); background: var(--c-fondo); color: var(--c-texto-2); }
.punto { width: 8px; height: 8px; border-radius: 50%; background: var(--c-marca); animation: latido 1.2s infinite; }
@keyframes latido { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .punto { animation: none; } }

.panel { display: flex; flex-direction: column; gap: 16px; position: sticky; top: calc(var(--h-cabecera) + 16px); align-self: start; }
.panel .tarjeta { padding: 14px 16px; }
.panel h2 { font-size: 13px; margin: 0 0 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--c-texto-2); }
.info { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.info .et { font-size: 11px; color: var(--c-texto-3); display: flex; gap: 6px; align-items: center; }
.estado-info { font-size: 10px; padding: 0 6px; border-radius: 999px; font-weight: 700; }
.estado-info.provided { background: var(--c-ok-suave); color: var(--c-ok); }
.estado-info.inferred { background: var(--c-marca-suave); color: var(--c-marca-oscura); }
.estado-info.pending { background: var(--c-alerta-suave); color: var(--c-alerta); }
.versiones { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.versiones a { display: flex; justify-content: space-between; gap: 8px; padding: 6px 8px; border-radius: var(--r-s);
  text-decoration: none; color: var(--c-texto); }
.versiones a:hover { background: var(--c-neutro-suave); }

/* ---------- configuración ---------- */
.form-config { display: grid; gap: 16px; max-width: 900px; }
.campo label { display: block; font-weight: 600; margin-bottom: 4px; }
.campo .ayuda { font-size: 12px; color: var(--c-texto-3); margin-top: 3px; }
.campo input, .campo select { width: 100%; padding: 8px 10px; border: 1px solid var(--c-borde); border-radius: var(--r-m);
  background: var(--c-fondo); }
.fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.ficha-modelo { font-size: 13px; padding: 10px 12px; background: var(--c-neutro-suave); border-radius: var(--r-m); }
#system_prompt { min-height: 360px; font-family: var(--mono); font-size: 12.5px; }
.historial { font-size: 13px; }
.historial td, .historial th { padding: 6px 8px; border-bottom: 1px solid var(--c-borde-suave); text-align: left; }

@media (max-width: 1100px) {
  .sesion { grid-template-columns: minmax(0, 1fr); }
  .panel { position: static; order: -1; }
}
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .lateral { position: fixed; inset: 0 auto 0 0; width: var(--w-lateral); z-index: 20; transform: translateX(-100%);
    transition: transform .16s; box-shadow: 0 0 40px rgba(0,0,0,.2); }
  body.menu-abierto .lateral { transform: none; }
  body.menu-abierto .velo { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 15; }
  .btn.menu-movil { display: inline-flex; }
  .contenido { padding: 16px 12px 32px; }
  .lista-sesiones li a { grid-template-columns: 1fr auto; }
  .lista-sesiones li a .fecha { display: none; }
  .tarea .campos { grid-template-columns: 1fr; }
}

/* ---------- autenticación ---------- */
.usuario { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--c-borde-suave); color: var(--c-texto); }
.usuario .badge { font-size: 10px; padding: 0 6px; }
.acciones-usuario { display: flex; gap: 12px; align-items: center; margin-top: 6px; }
.acciones-usuario form { margin: 0; }
button.enlace { background: none; border: 0; padding: 0; color: var(--c-marca-oscura); cursor: pointer; text-decoration: underline; font-size: 12px; }
.acciones-usuario a { font-size: 12px; }
.pagina-login { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.caja-login { width: 100%; max-width: 380px; padding: 28px; }
.caja-login h1 { font-size: 18px; margin: 0 0 4px; }
.caja-login form { display: grid; gap: 14px; margin-top: 18px; }
.campo input[type=email], .campo input[type=password], .campo input[type=text] { width: 100%; padding: 9px 11px;
  border: 1px solid var(--c-borde); border-radius: var(--r-m); background: var(--c-fondo); }
.tabla-usuarios { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabla-usuarios th, .tabla-usuarios td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--c-borde-suave); vertical-align: top; }
.tabla-usuarios tr.inactivo td { color: var(--c-texto-3); }
.panel-form { display: grid; gap: 12px; padding: 18px 20px; max-width: 640px; }
.fila-botones { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 900px) { .tabla-usuarios .opcional { display: none; } }