:root {
  --ink: #243342;
  --muted: #617183;
  --line: #dfe8eb;
  --blue: #dff1fb;
  --mint: #dff5e8;
  --yellow: #fff3c9;
  --coral: #ffe0d8;
  --danger: #fbe0e3;
  --paper: #fbfaf5;
}

* { box-sizing: border-box; }

body { font-family: "Work Sans", sans-serif; color: var(--ink); }

.app-shell { min-height: calc(100 * min(var(--vh, 1vh), 1vh)); }

.nav-item { transition: .2s ease; }
/* El menú del panel fijo es más largo que la ventana: sin scroll, las últimas entradas
   (y la de administración) quedaban fuera de pantalla sin forma de alcanzarlas. */
.side-nav { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.nav-item:hover, .nav-item:focus-visible { background: #edf7fb; color: #17647d; outline: none; }
.nav-item.active { background: #dff1fb; color: #145b74; font-weight: 700; }

.view { display: none; }
.view.active { display: block; animation: rise .35s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.score-ring {
  background: conic-gradient(#5ab983 var(--score), #e8eff1 0);
  border-radius: 999px; width: 154px; height: 154px; padding: 11px;
}
.score-core { background: #fff; border-radius: inherit; width: 100%; height: 100%; }

.soft-card { border: 1px solid var(--line); box-shadow: 0 8px 26px rgba(38, 70, 83, .05); }

.answer-btn { border: 1px solid #d8e2e6; transition: .2s ease; }
.answer-btn:hover, .answer-btn:focus-visible { border-color: #4a9ab6; outline: 3px solid rgba(74,154,182,.18); }
.answer-btn.selected-clear { background: #dff5e8; border-color: #62b985; color: #17613b; }
.answer-btn.selected-partial { background: #fff8e1; border-color: #e8b84b; color: #765c08; }
.answer-btn.selected-no { background: #fbe0e3; border-color: #d56a5a; color: #8c2437; }
.answer-btn.selected-uncertain { background: #fff3c9; border-color: #ddb84c; color: #765c08; }
.answer-btn.selected-na { background: #edf1f3; border-color: #9aa9b1; color: #455866; }

.tag { display: inline-flex; align-items: center; border-radius: 999px; padding: .27rem .65rem; font-size: .72rem; font-weight: 700; letter-spacing: .03em; }

.status-good { background:#dff5e8; color:#17613b; }
.status-watch { background:#fff3c9; color:#765c08; }
.status-attention { background:#ffe7c7; color:#995400; }
.status-risk { background:#ffe0d8; color:#a44026; }
.status-critical { background:#fbe0e3; color:#a51d38; }
.status-neutral { background:#edf1f3; color:#52636f; }

.modal-layer { display:none; }
.modal-layer.open { display:flex; }

/* ===== Pantalla de login (autocontenida) =====
   Su layout NO depende del CDN de Tailwind: con que cargue este styles.css (archivo local)
   la pantalla de acceso se muestra a tamaño completo y centrada. Además oculta la app
   mientras está activa, para que no se vea ni se pueda usar el contenido del fondo. */
.app-shell[hidden] { display: none !important; }
.auth-screen[hidden] { display: none !important; }

.auth-screen {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  background:
    radial-gradient(1100px 620px at 12% -12%, #dff1fb 0%, rgba(223,241,251,0) 55%),
    radial-gradient(900px 520px at 112% 112%, #dff5e8 0%, rgba(223,245,232,0) 52%),
    linear-gradient(160deg, #f4fbfe 0%, #fbfaf5 62%);
}

.auth-card {
  width: 100%;
  max-width: 420px;
  padding: 32px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(38, 70, 83, .16);
  animation: rise .4s ease both;
}

.auth-brand { display: flex; align-items: center; gap: 14px; }
.auth-logo {
  flex: 0 0 auto;
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 16px;
  background: var(--blue);
  color: #17647d;
}
.auth-kicker {
  margin: 0;
  font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
}
.auth-title { margin: 2px 0 0; font-size: 22px; font-weight: 700; line-height: 1.2; color: var(--ink); }
.auth-subtitle { margin: 18px 0 22px; font-size: 14px; line-height: 1.5; color: var(--muted); }

.auth-field { margin-bottom: 16px; }
.auth-label { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 600; color: var(--ink); }
.auth-input {
  width: 100%;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  background: #fff;
  border: 1px solid #ccd9de;
  border-radius: 12px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.auth-input::placeholder { color: #9fb0bb; }
.auth-input:focus {
  outline: none;
  border-color: #4a9ab6;
  box-shadow: 0 0 0 4px rgba(74,154,182,.18);
}

.auth-submit {
  width: 100%;
  margin-top: 8px;
  padding: 13px 16px;
  font-family: inherit;
  font-size: 15px; font-weight: 700;
  color: #fff;
  background: #17647d;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  transition: filter .2s ease, transform .05s ease;
}
.auth-submit:hover { filter: brightness(1.08); }
.auth-submit:active { transform: translateY(1px); }
.auth-submit:disabled { opacity: .6; cursor: not-allowed; }
.auth-submit:focus-visible { outline: 3px solid rgba(74,154,182,.4); outline-offset: 2px; }

.auth-message { margin: 14px 0 0; min-height: 1.2em; font-size: 13.5px; line-height: 1.5; }
.auth-message:empty { display: none; }
.auth-message.is-loading { color: var(--muted); }
.auth-message.is-error { color: #a44026; }
.auth-message.is-ok { color: #17613b; }

/* Oculta el campo de confirmación en modo login (se muestra solo al crear cuenta). El login no depende del CDN de Tailwind. */
.hidden-field { display: none; }

.auth-switch { margin: 16px 0 0; text-align: center; font-size: 13.5px; }
.auth-toggle {
  font-family: inherit;
  font-size: 13.5px;
  color: var(--muted);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.auth-toggle strong { color: #17647d; font-weight: 700; }
.auth-toggle:hover strong { text-decoration: underline; }

.auth-foot {
  margin: 22px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 11.5px;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 480px) {
  .auth-card { padding: 24px; border-radius: 20px; }
  .auth-title { font-size: 20px; }
}

@media (max-width: 900px) {
  .side-panel { position: static; width: 100%; height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .side-nav { overflow-x: auto; flex-direction: row; padding-bottom: .5rem; }
  .nav-item { white-space: nowrap; }
  .main-panel { margin-left: 0 !important; }
}

/* Zona a la que salta una alerta: se resalta unos segundos y el margen evita que
   el encabezado fijo la tape al hacer scroll. */
.alert-flash {
  scroll-margin-top: 90px;
  border-radius: 12px;
  outline: 2px solid #e8b84b;
  outline-offset: 5px;
  animation: alert-flash 2.6s ease-out forwards;
}

@keyframes alert-flash {
  0%, 55% { outline-color: #e8b84b; }
  100% { outline-color: transparent; }
}