/*
 * public/app.css — Shell PWA FASE 4b (4b-4).
 *
 * Alcance: layout funcional mínimo. Diseño decorativo va en 4d.
 *
 * Paleta (RH1/RH3/RH6):
 *   - Azul de la bandera cubana:   #002A8F
 *   - Blanco de la bandera cubana: #FFFFFF
 *   - Rojo de la bandera cubana:   #CF142B (solo acento de marca)
 *
 * Semántica digital (RH4):
 *   - Rojo = acento no-semántico (línea bajo header).
 *   - Verde/gris = estados online/offline. No colisionan con marca.
 *   - Los 3 colores de la bandera están presentes pero NO imponen
 *     semántica sobre significados universales.
 */

/* Reset funcional */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background-color: #FFFFFF;
  color: #222;
  line-height: 1.5;

  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Header: azul de la bandera cubana + acento rojo */
header {
  background-color: #002A8F;
  color: #FFFFFF;
  padding: 0.75rem 1rem;
  border-bottom: 3px solid #CF142B;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

header h1 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
  letter-spacing: 0.02em;
}

/* Indicador online/offline (RH4: verde/gris, no rojo) */
#estado-conexion {
  font-size: 0.85rem;
  padding: 0.15rem 0.5rem;
  border-radius: 0.25rem;
  background-color: rgba(255, 255, 255, 0.15);
  white-space: nowrap;
}

#estado-conexion[data-estado="online"] {
  color: #A5D6A7;
}

#estado-conexion[data-estado="offline"] {
  color: #E0E0E0;
}

/* Main */
main {
  flex: 1 1 auto;
  padding: 1rem;
}

main p {
  margin: 0;
}

/* Footer */
footer {
  padding: 0.5rem 1rem;
  background-color: #F5F5F5;
  color: #616161;
  border-top: 1px solid #E0E0E0;
  text-align: center;
}

footer small {
  font-size: 0.75rem;
}