/* ============================================================
   GOMSTERS — Material Design 3 Theme (dark)
   Rejilla de 12 columnas + tokens MD3
   ============================================================ */

:root {
  /* ── MD3 Color Tokens (dark theme) ─────────────────────── */
  --md-sys-color-primary: #D0BCFF;
  --md-sys-color-on-primary: #381E72;
  --md-sys-color-primary-container: #4F378B;
  --md-sys-color-on-primary-container: #EADDFF;

  --md-sys-color-secondary: #CCC2DC;
  --md-sys-color-on-secondary: #332D41;
  --md-sys-color-secondary-container: #4A4458;
  --md-sys-color-on-secondary-container: #E8DEF8;

  --md-sys-color-tertiary: #EFB8C8;
  --md-sys-color-on-tertiary: #492532;

  --md-sys-color-error: #F2B8B5;
  --md-sys-color-on-error: #601410;
  --md-sys-color-error-container: #8C1D18;
  --md-sys-color-on-error-container: #F9DEDC;

  --md-sys-color-background: #1C1B1F;
  --md-sys-color-on-background: #E6E1E5;
  --md-sys-color-surface: #1C1B1F;
  --md-sys-color-on-surface: #E6E1E5;
  --md-sys-color-surface-variant: #49454F;
  --md-sys-color-on-surface-variant: #CAC4D0;
  --md-sys-color-outline: #938F99;
  --md-sys-color-outline-variant: #49454F;

  --md-sys-color-inverse-surface: #E6E1E5;
  --md-sys-color-inverse-on-surface: #313033;

  /* ── MD3 Elevation ─────────────────────────────────────── */
  --md-elevation-1: 0 1px 2px rgba(0,0,0,0.3), 0 1px 3px 1px rgba(0,0,0,0.15);
  --md-elevation-2: 0 1px 2px rgba(0,0,0,0.3), 0 2px 6px 2px rgba(0,0,0,0.15);
  --md-elevation-3: 0 4px 8px 3px rgba(0,0,0,0.15), 0 1px 3px rgba(0,0,0,0.3);

  /* ── MD3 Shape ─────────────────────────────────────────── */
  --md-shape-corner-extra-small: 4px;
  --md-shape-corner-small: 8px;
  --md-shape-corner-medium: 12px;
  --md-shape-corner-large: 16px;
  --md-shape-corner-extra-large: 28px;

  /* ── MD3 Typography (Roboto) ──────────────────────────── */
  --md-type-display-large: 57px;
  --md-type-display-medium: 45px;
  --md-type-headline-large: 32px;
  --md-type-headline-medium: 28px;
  --md-type-headline-small: 24px;
  --md-type-title-large: 22px;
  --md-type-title-medium: 16px;
  --md-type-title-small: 14px;
  --md-type-body-large: 16px;
  --md-type-body-medium: 14px;
  --md-type-body-small: 12px;
  --md-type-label-large: 14px;
  --md-type-label-medium: 12px;
  --md-type-label-small: 11px;
}

/* ── Reset ──────────────────────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--md-sys-color-background);
  color: var(--md-sys-color-on-background);
  font-family: 'Roboto', 'Segoe UI', system-ui, sans-serif;
  font-size: var(--md-type-body-medium);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ── Rejilla MD3 de 12 columnas ─────────────────────────── */
.md-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
  padding: 16px;
  max-width: 1440px;
  margin: 0 auto;
}

.md-col-1  { grid-column: span 1; }
.md-col-2  { grid-column: span 2; }
.md-col-3  { grid-column: span 3; }
.md-col-4  { grid-column: span 4; }
.md-col-5  { grid-column: span 5; }
.md-col-6  { grid-column: span 6; }
.md-col-7  { grid-column: span 7; }
.md-col-8  { grid-column: span 8; }
.md-col-9  { grid-column: span 9; }
.md-col-10 { grid-column: span 10; }
.md-col-11 { grid-column: span 11; }
.md-col-12 { grid-column: span 12; }

/* Responsive: colapsa a 1 columna en pantallas chicas */
@media (max-width: 900px) {
  .md-col-3, .md-col-4, .md-col-5, .md-col-6,
  .md-col-7, .md-col-8, .md-col-9, .md-col-10, .md-col-11, .md-col-12 {
    grid-column: span 12;
  }
}

/* ── App bar ────────────────────────────────────────────── */
.md-app-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  box-shadow: var(--md-elevation-1);
  position: sticky;
  top: 0;
  z-index: 10;
}

.md-app-bar__title {
  font-size: var(--md-type-title-large);
  font-weight: 500;
}

.md-app-bar__subtitle {
  font-size: var(--md-type-label-medium);
  color: var(--md-sys-color-on-surface-variant);
}

/* ── Card ───────────────────────────────────────────────── */
.md-card {
  background: var(--md-sys-color-surface);
  border-radius: var(--md-shape-corner-medium);
  box-shadow: var(--md-elevation-1);
  padding: 16px;
  border: 1px solid var(--md-sys-color-outline-variant);
}

.md-card--filled {
  background: var(--md-sys-color-surface-variant);
  color: var(--md-sys-color-on-surface-variant);
}

.md-card--tonal {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

.md-card__title {
  font-size: var(--md-type-title-medium);
  font-weight: 500;
  margin-bottom: 8px;
}

/* ── Button MD3 ─────────────────────────────────────────── */
.md-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 24px;
  border: none;
  border-radius: var(--md-shape-corner-extra-large);
  font-size: var(--md-type-label-large);
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.15s, box-shadow 0.15s;
  text-transform: uppercase;
  letter-spacing: 0.1px;
}

.md-btn:active { opacity: 0.8; }

.md-btn--filled {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}

.md-btn--tonal {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

.md-btn--error {
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
}

.md-btn--outlined {
  background: transparent;
  color: var(--md-sys-color-primary);
  border: 1px solid var(--md-sys-color-outline);
}

.md-btn--small {
  padding: 6px 16px;
  font-size: var(--md-type-label-medium);
}

/* ── Text field ─────────────────────────────────────────── */
.md-field {
  background: var(--md-sys-color-surface-variant);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-shape-corner-small);
  color: var(--md-sys-color-on-surface);
  padding: 12px 16px;
  font-size: var(--md-type-body-large);
  font-family: inherit;
  width: 100%;
}

.md-field:focus {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: -1px;
}

/* ── List / Table ───────────────────────────────────────── */
.md-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.md-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--md-shape-corner-small);
  cursor: pointer;
  transition: background 0.15s;
}

.md-list-item:hover { background: var(--md-sys-color-surface-variant); }
.md-list-item--active { background: var(--md-sys-color-primary-container); }

/* ── Badge / estado ─────────────────────────────────────── */
.md-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--md-shape-corner-extra-large);
  font-size: var(--md-type-label-medium);
  font-weight: 500;
}

.md-badge--online { background: #1b5e20; color: #a5d6a7; }
.md-badge--offline { background: #4a4458; color: #cac4d0; }
.md-badge--error { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }

/* ── Log (terminal) ─────────────────────────────────────── */
.md-log {
  background: #000000;
  color: #33ff33;
  font-family: 'Consolas', 'Roboto Mono', monospace;
  font-size: var(--md-type-body-small);
  border-radius: var(--md-shape-corner-small);
  padding: 12px;
  height: 100%;
  min-height: 200px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Screenshot live ────────────────────────────────────── */
.md-screen {
  background: #000;
  border-radius: var(--md-shape-corner-medium);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  color: #666;
  overflow: hidden;
}

.md-screen img {
  max-width: 100%;
  max-height: 480px;
  object-fit: contain;
}

/* ── Utilidades ─────────────────────────────────────────── */
.md-divider {
  border: none;
  border-top: 1px solid var(--md-sys-color-outline-variant);
  margin: 12px 0;
}

.md-muted { color: var(--md-sys-color-on-surface-variant); }

.md-flex { display: flex; }
.md-flex--between { justify-content: space-between; }
.md-flex--center { align-items: center; }
.md-gap { gap: 8px; }
.md-gap--lg { gap: 16px; }