/* === Reset and base === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: system-ui, -apple-system, sans-serif;
  background: #f0f4f8;
  color: #1a202c;
  min-height: 100vh;
}

/* === Layout === */
.app-header {
  background: #1a365d;
  color: white;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.app-header h1 { font-size: 1.1rem; font-weight: 600; }
.btn-logout {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.4);
  color: white;
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  font-size: 0.85rem;
  cursor: pointer;
}
.main-content { padding: 1.25rem; max-width: 600px; margin: 0 auto; }

/* === Loading / error states === */
.loading-state { text-align: center; padding: 3rem 1rem; color: #718096; }
.error-state { background: #fed7d7; border-radius: 10px; padding: 1rem 1.25rem; color: #9b2c2c; margin-bottom: 1rem; }

/* === Device cards === */
.devices-title { font-size: 1rem; font-weight: 600; color: #2d3748; margin-bottom: 0.75rem; }
.device-card {
  background: white;
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-bottom: 0.75rem;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.device-card:hover, .device-card:active {
  border-color: #4299e1;
  box-shadow: 0 2px 8px rgba(66,153,225,0.25);
}
.device-name { font-size: 1rem; font-weight: 600; color: #1a365d; margin-bottom: 0.25rem; }
.device-desc { font-size: 0.875rem; color: #718096; margin-bottom: 0.5rem; }
.device-last-seen { font-size: 0.8rem; color: #a0aec0; }

/* === Chart view placeholder (filled in Plan 04) === */
.chart-container { background: white; border-radius: 12px; padding: 1rem; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.back-link { display: inline-flex; align-items: center; gap: 0.4rem; color: #4299e1; font-size: 0.9rem; margin-bottom: 1rem; cursor: pointer; background: none; border: none; padding: 0; }

/* === Chart view additions === */
.badge-ok       { background:#c6f6d5; color:#276749; }
.badge-baja     { background:#fefcbf; color:#975a16; }
.badge-critica  { background:#fed7d7; color:#9b2c2c; }
.badge-cargando { background:#ebf8ff; color:#2b6cb0; }