/* Estilo «Carbón violeta»: Design System (LNB) con acento violeta propio (assets/manual-de-marca.md).
   Estructura de project:design; la maqueta aprobada es https://claude.ai/artifact/GTVNcpoQzTLxr9Cyg4t5Ca */

:root {
  /* LNB, sin cambios */
  --bg: #242528; --card: #2f3134; --border: #3a3c40; --border-ctl: #7a7d85;
  --text: #ffffff; --muted: #a8a8a8;
  --sem-verde: #3ecf6e; --sem-amarillo: #e8c547; --sem-amarillo-texto: #e8c547;
  --sem-rojo: #e05d5d; --sem-rojo-texto: #ef8585;
  --sem-rojo-10: rgba(224, 93, 93, .10); --sem-rojo-35: rgba(224, 93, 93, .35);
  --superficie: rgba(47, 49, 52, .72); --superficie-solida: #2a2b2f; --pill: #2a2d31;
  --amarillo-12: rgba(232, 197, 71, .12);
  /* Acento de Salud (reemplaza el azul de LNB) */
  --accent: #a99cff; --accent-on: #1b1440; --accent-texto: #bbb1ff;
  --accent-05: rgba(169, 156, 255, .05); --accent-08: rgba(169, 156, 255, .08); --accent-16: rgba(169, 156, 255, .16);
  /* Formas */
  --r-pill: 999px; --r-ctrl: 9px; --r-ico: 8px; --r-card: 12px; --r-card-sm: 10px;
  --h-ctrl: 38px; --h-ico: 32px; --h-pill: 32px; --tactil: 44px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 12.5px; line-height: 18px;
  color: var(--text); background: radial-gradient(1200px 500px at 10% -10%, var(--accent-08), transparent 60%), var(--bg);
  background-attachment: fixed; min-height: 100vh;
  padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px);
}
button { font: inherit; color: inherit; }
:where(a, button, select, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }

.cargando { display: grid; place-items: center; min-height: 100vh; color: var(--muted); }

/* ===== Ingreso ===== */
.vista-login { display: grid; place-items: center; min-height: 100vh; padding: 24px 16px; }
.login-card {
  width: 100%; max-width: 380px; background: var(--card); border: 1px solid var(--accent-16);
  border-radius: var(--r-card); padding: 28px 24px;
}
.titulo-login { margin: 0 0 6px; font-size: 22px; line-height: 28px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.ayuda { margin: 0 0 18px; color: var(--muted); font-size: 13px; line-height: 19px; }
.login-form { display: flex; flex-direction: column; gap: 14px; }
.btn-google {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: var(--tactil);
  padding: 0 14px; background: var(--bg); border: 1px solid var(--border-ctl); border-radius: var(--r-ctrl);
  font-weight: 600; cursor: pointer;
}
.btn-google:hover { border-color: var(--accent); }
.btn-google:disabled { opacity: .55; cursor: not-allowed; }
.logo-google { flex: none; }
.msg-error { margin: 0; color: var(--sem-rojo-texto); font-size: 13px; line-height: 19px; }
.msg-error:empty { display: none; }

/* ===== Topbar ===== */
.topbar {
  position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  padding: 10px 28px; background: var(--superficie); backdrop-filter: blur(12px); border-bottom: 1px solid var(--accent-16);
}
.titulo-app-h { margin: 0; display: flex; align-items: center; gap: 8px; justify-self: start; font-size: 22px; line-height: 28px; font-weight: 700; }
.titulo-app { background: none; border: 0; padding: 0; cursor: pointer; font-size: inherit; line-height: inherit; font-weight: inherit; }
.tag-amb {
  font-size: 11px; line-height: 14px; font-weight: 600; padding: 2px 8px; border-radius: var(--r-pill);
  border: 1px solid var(--sem-amarillo); color: var(--sem-amarillo-texto); background: var(--amarillo-12);
}
.badges { display: flex; gap: 8px; }
.derecha { justify-self: end; display: flex; align-items: center; gap: 12px; color: var(--muted); min-width: 0; }
.email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon-btn {
  display: grid; place-items: center; width: var(--h-ico); height: var(--h-ico); padding: 0; border-radius: var(--r-ico);
  border: 1px solid var(--border-ctl); background: var(--superficie-solida); color: var(--text); cursor: pointer;
}
.icon-btn:hover { border-color: var(--accent); }

/* ===== Contenido ===== */
.contenido { max-width: min(calc(50vw + 660px), 1600px); margin: 0 auto; padding: 16px 20px 48px; }
.header-row { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.header-row h2 { margin: 0; font-size: 19px; line-height: 25px; font-weight: 700; }
.avisos:empty { display: none; }
.aviso {
  display: flex; align-items: center; gap: 12px; max-width: min(calc(50vw + 660px), 1600px); margin: 12px auto 0;
  padding: 10px 14px; border: 1px solid var(--sem-rojo-35); border-radius: var(--r-ctrl); background: var(--sem-rojo-10);
  color: var(--sem-rojo-texto); font-size: 13px;
}
.aviso .btn { margin-left: auto; }
.btn {
  height: var(--h-ctrl); padding: 0 14px; border-radius: var(--r-ctrl); border: 1px solid var(--border-ctl);
  background: var(--superficie-solida); font-weight: 600; cursor: pointer;
}
.btn:hover { border-color: var(--accent); }
.tarjeta-vacia { background: var(--card); border: 1px solid var(--accent-16); border-radius: var(--r-card); padding: 20px 22px; max-width: 640px; }
.tarjeta-vacia h3 { margin: 0 0 6px; font-size: 15px; line-height: 20px; }
.tarjeta-vacia p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 20px; }

/* ===== Celular ===== */
@media (max-width: 768px) {
  .topbar { grid-template-columns: 1fr auto; padding: 10px 16px; }
  .badges, .email { display: none; }
  .contenido { padding: 12px 16px 40px; }
  .header-row h2 { display: none; }
  .header-row { margin-bottom: 0; }
  .aviso { margin: 12px 16px 0; }
}

/* ===== Celular horizontal ===== */
@media (orientation: landscape) and (max-height: 500px) {
  .topbar { grid-template-columns: 1fr auto; padding: 8px 20px; }
  .badges, .email { display: none; }
  .contenido { padding: 8px 20px 32px; }
  .header-row h2 { display: none; }
  .header-row { margin-bottom: 0; }
  .vista-login { align-items: start; padding: 12px 16px; }
  .login-card { padding: 18px 20px; }
  .ayuda { margin-bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }