* { box-sizing: border-box; }
:root {
  --color-primario: #f2f2f0;   /* 60% — fondo */
  --color-secundario: #3f4a52; /* 30% — header/superficies, texto blanco */
  --color-acento: #c1583a;     /* 10% — botones primarios, texto blanco */
}
body { font-family: system-ui, sans-serif; margin: 0; color: #1a1a1a; background: var(--color-primario); }

header { background: var(--color-secundario); color: white; }
nav { display: flex; align-items: center; gap: 1.1rem; padding: 0.8rem 1.5rem; flex-wrap: wrap; }
nav a { color: white; text-decoration: none; font-size: 0.95rem; }
nav a:hover { text-decoration: underline; }
nav .marca { font-weight: bold; margin-right: 0.5rem; }
nav .spacer { flex: 1; }

.user-menu { position: relative; }
.user-menu summary { cursor: pointer; color: white; list-style: none; }
.user-menu summary::-webkit-details-marker { display: none; }
.user-menu-panel {
  position: absolute; right: 0; top: 1.6rem; background: white; color: #1a1a1a;
  border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.2); padding: 0.6rem; min-width: 140px;
  display: flex; flex-direction: column; gap: 0.4rem; z-index: 10;
}
.user-menu-panel button { background: none; border: none; color: var(--color-acento); cursor: pointer; text-align: left; padding: 0; font-size: 0.95rem; }

main { max-width: 900px; margin: 2rem auto; padding: 0 1.5rem; }
h1 { font-size: 1.4rem; }

.login-box { max-width: 340px; margin: 4rem auto; padding: 2rem; background: white; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.15); }
.login-box h1 { margin-bottom: 0; font-size: 1.2rem; }
.login-box .subtitulo { margin-top: 0.1rem; color: #666; }
.login-box label { display: block; margin: 1rem 0 0.3rem; font-size: 0.9rem; }
.login-box input { width: 100%; padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px; }
.login-box button { margin-top: 1.4rem; width: 100%; padding: 0.6rem; background: var(--color-acento); color: white; border: none; border-radius: 4px; font-weight: 600; cursor: pointer; }
.login-box button:hover { opacity: 0.9; }
.login-box .error { color: #9c281f; background: #f8e2e0; padding: 0.5rem 0.7rem; border-radius: 4px; font-size: 0.9rem; }