/* Panel del Cerebro — Groumind
   Tokens derivados de projects/_groumind/brand/brand-guide.md (dark).
   Mobile-first. Sin framework. */

:root {
  /* Superficies */
  --surface-base: #0C100E;
  --surface-deep: #0A0D0B;
  --surface-card: #10160F;
  --surface-raised: #141C18;
  --surface-hover: #1B241F;

  /* Texto */
  --text-primary: #ECF1ED;
  --text-secondary: #9AA8A0;
  --text-muted: #67756C;
  --text-brand: #2EC98A;

  /* Bordes */
  --border-subtle: #1B241F;
  --border-default: #2A332D;
  --border-strong: #3D4D42;

  /* Señal */
  --accent: #2EC88A;
  --accent-hover: #25B87A;
  --accent-active: #1DA368;
  --on-accent: #0C100E;

  /* Semáforo (estados de brand) */
  --sem-verde: #2EC88A;
  --sem-verde-bg: #0E2B1D;
  --sem-amarillo: #D4A444;
  --sem-amarillo-bg: #2B1F09;
  --sem-rojo: #E05454;
  --sem-rojo-bg: #2B1010;
  --sem-sindato: #808E86;
  --sem-sindato-bg: #1B241F;
  --info: #5B9FD4;
  --info-bg: #0E1F2B;

  /* Tipografía */
  --font-display: 'Space Grotesk', 'IBM Plex Sans', sans-serif;
  --font-ui: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* Espaciado (base 8px) */
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --touch-min: 44px;

  /* Z-scale semántica */
  --z-sticky: 10;
  --z-toast: 30;

  --ease: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out-quint */
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface-base);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ============ Layout base ============ */

.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--space-md) var(--space-2xl);
}

section { margin-top: var(--space-2xl); }

.seccion-titulo {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  margin: 0 0 var(--space-md);
}

/* ============ Header ============ */

.header {
  padding: var(--space-lg) 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs) var(--space-sm);
}

.wordmark {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.wordmark b { font-weight: 700; color: var(--text-brand); }

.header-sub {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-sm);
  color: var(--text-secondary);
  font-size: 14px;
}

.header-cliente { font-weight: 600; color: var(--text-primary); }

.header-fecha { color: var(--text-muted); }

.btn-actualizar { margin-left: auto; }

/* ============ Botones ============ */

.btn {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  min-height: var(--touch-min);
  padding: 0 var(--space-md);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-default);
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 150ms var(--ease), border-color 150ms var(--ease),
              transform 150ms var(--ease);
}
.btn:hover { border-color: var(--border-strong); background: var(--surface-hover); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--surface-card), 0 0 0 4px var(--accent);
}
.btn:disabled { opacity: 0.38; cursor: default; }

.btn-primario {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}
.btn-primario:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-primario:active { background: var(--accent-active); }

.btn-peligro:hover { border-color: var(--sem-rojo); color: var(--sem-rojo); background: var(--sem-rojo-bg); }

/* Acción de éxito: verde como señal sin saturar (una card puede repetirse N veces) */
.btn-exito { color: var(--sem-verde); }
.btn-exito:hover { border-color: var(--sem-verde); background: var(--sem-verde-bg); }

.btn-chico { min-height: 36px; font-size: 13px; padding: 0 var(--space-sm); }

/* ============ Diagnóstico ============ */

.cuello {
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.cuello-frase {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}
.cuello-frase strong { font-weight: 700; color: var(--text-brand); }

.palancas {
  list-style: none;
  margin: var(--space-md) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.palanca {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px var(--space-sm);
  padding: var(--space-md);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-card);
}
.palanca.es-cuello {
  border-color: var(--border-strong);
  background: var(--surface-raised);
}

.semaforo {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 7px;
}
.semaforo.verde    { background: var(--sem-verde); }
.semaforo.amarillo { background: var(--sem-amarillo); }
.semaforo.rojo     { background: var(--sem-rojo); }
.semaforo.sin_dato { background: none; border: 2px solid var(--sem-sindato); width: 8px; height: 8px; }

.palanca-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  flex-wrap: wrap;
}
.palanca-nombre { font-weight: 600; font-size: 15px; }
.palanca-estado { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.palanca-estado.verde    { color: var(--sem-verde); }
.palanca-estado.amarillo { color: var(--sem-amarillo); }
.palanca-estado.rojo     { color: var(--sem-rojo); }
.palanca-estado.sin_dato { color: var(--sem-sindato); }

.palanca-resumen {
  grid-column: 2;
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 65ch;
}

/* ============ Tareas ============ */

.filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}

.segmentado {
  display: inline-flex;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.segmentado button {
  font-family: var(--font-ui);
  font-size: 13px;
  min-height: 36px;
  padding: 0 var(--space-sm);
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}
.segmentado button[aria-pressed="true"] {
  background: var(--surface-hover);
  color: var(--text-primary);
  font-weight: 600;
}
.segmentado button:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--accent);
}

.filtro-palanca {
  font-family: var(--font-ui);
  font-size: 13px;
  min-height: 36px;
  padding: 0 var(--space-sm);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-default);
  background: var(--surface-base);
  color: var(--text-primary);
}

.tareas-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.tarea {
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  transition: border-color 150ms var(--ease);
}
.tarea:hover { border-color: var(--border-default); }
.tarea.cerrada { opacity: 0.72; }

.tarea-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--space-xs);
}

.chip {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  background: transparent;
}
.chip.prioridad-alta  { color: var(--sem-rojo); border-color: var(--sem-rojo); background: var(--sem-rojo-bg); }
.chip.prioridad-media { color: var(--sem-amarillo); border-color: transparent; background: var(--sem-amarillo-bg); }
.chip.prioridad-baja  { color: var(--text-muted); }
.chip.estado-en_ejecucion { color: var(--info); border-color: transparent; background: var(--info-bg); }
.chip.estado-resuelta     { color: var(--sem-verde); border-color: transparent; background: var(--sem-verde-bg); }
.chip.estado-descartada   { color: var(--text-muted); border-color: transparent; background: var(--sem-sindato-bg); }

.tarea-titulo {
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 4px;
  text-wrap: balance;
}

.tarea-responsable {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
}
.tarea-responsable .propuesto { color: var(--text-muted); }

.tarea-toggle {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--text-secondary);
  background: none;
  border: none;
  padding: var(--space-xs) 0;
  min-height: 36px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.tarea-toggle:hover { color: var(--text-primary); }
.tarea-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.tarea-detalle { margin-top: var(--space-xs); }

.tarea-descripcion {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0 0 var(--space-sm);
  max-width: 65ch;
  text-wrap: pretty;
}

.eventos { list-style: none; margin: 0; padding: 0; }
.evento {
  font-size: 13px;
  color: var(--text-secondary);
  padding: var(--space-xs) 0 var(--space-xs) var(--space-sm);
  border-top: 1px solid var(--border-subtle);
}
.evento-meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); display: block; margin-bottom: 2px; }

.tarea-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
}

/* Formulario de acción inline */
.form-accion {
  margin-top: var(--space-sm);
  padding: var(--space-md);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.form-accion label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.form-accion .ayuda { font-weight: 400; color: var(--text-muted); font-size: 13px; margin: 0; }

.form-accion input[type="text"],
.form-accion textarea,
.form-accion select {
  font-family: var(--font-ui);
  font-size: 16px; /* evita zoom de iOS */
  color: var(--text-primary);
  background: var(--surface-base);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 10px var(--space-sm);
  min-height: var(--touch-min);
  transition: border-color 150ms var(--ease);
}
.form-accion textarea { resize: vertical; min-height: 72px; }
.form-accion input:hover, .form-accion textarea:hover, .form-accion select:hover { border-color: var(--border-strong); }
.form-accion input:focus, .form-accion textarea:focus, .form-accion select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--surface-card), 0 0 0 4px rgba(46, 200, 138, 0.35);
}

.form-error { color: var(--sem-rojo); font-size: 13px; margin: 0; }

.form-botones { display: flex; gap: var(--space-xs); justify-content: flex-end; }

/* ============ Historial ============ */

.historial-lista { list-style: none; margin: 0; padding: 0; }

.historial-item {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  border-top: 1px solid var(--border-subtle);
  font-size: 14px;
}
.historial-item:last-child { border-bottom: 1px solid var(--border-subtle); }

.historial-fecha {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  min-width: 88px;
}

.historial-texto { color: var(--text-secondary); margin: 0; }
.historial-texto b { color: var(--text-primary); font-weight: 600; }

/* ============ Estados de página ============ */

.estado-pagina {
  margin-top: var(--space-2xl);
  padding: var(--space-xl) var(--space-lg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  text-align: center;
}

.estado-pagina h2 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  margin: 0 0 var(--space-xs);
}

.estado-pagina p { color: var(--text-secondary); margin: 0 0 var(--space-md); font-size: 14px; }

/* Skeleton */
.skeleton { display: flex; flex-direction: column; gap: var(--space-sm); margin-top: var(--space-2xl); }
.skeleton .hueso {
  border-radius: var(--radius-md);
  background: linear-gradient(100deg, var(--surface-card) 40%, var(--surface-hover) 50%, var(--surface-card) 60%);
  background-size: 200% 100%;
  animation: brillo 1.4s ease-in-out infinite;
}
@keyframes brillo { from { background-position: 120% 0; } to { background-position: -80% 0; } }

/* Toast */
.toast {
  position: fixed;
  z-index: var(--z-toast);
  left: 50%;
  bottom: var(--space-lg);
  transform: translateX(-50%);
  background: var(--surface-hover);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  font-size: 14px;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.48);
  max-width: calc(100vw - 32px);
  opacity: 0;
  transition: opacity 250ms var(--ease);
}
.toast.visible { opacity: 1; }
.toast.error { border-color: var(--sem-rojo); }

/* Aviso modo demo */
.aviso-demo {
  margin-top: var(--space-md);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sem-amarillo);
  background: var(--sem-amarillo-bg);
  border-radius: var(--radius-sm);
  padding: 6px var(--space-sm);
  display: inline-block;
}

/* ============ Footer ============ */

.footer {
  margin-top: var(--space-2xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
}

/* ============ Utilidades ============ */

.oculto { display: none !important; }

.visualmente-oculto {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============ Desktop ============ */

@media (min-width: 640px) {
  .wrap { padding: 0 var(--space-lg) var(--space-2xl); }
  .cuello-frase { font-size: 28px; }
  .header { padding-top: var(--space-xl); }
}

/* ============ Movimiento reducido ============ */

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}