@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700;800&display=swap');

/* ── Custom properties ─────────────────────────────────────────── */
:root {
  --navy:    #0A1628;
  --navy-l:  #111D32;
  --blue:    #1D72F5;
  --blue-h:  #1560D4;
  --green:   #22C55E;
  --red:     #EF4444;
  --white:   #FFFFFF;
  --gray:    #64748B;
  --gray-l:  #94A3B8;
  --gray-xl: #CBD5E1;
  --navy-d:  #060E1A;
  --radius:  10px;
  --radius-l: 16px;
  --shadow:  0 8px 32px rgba(0,0,0,.28);
  --ease:    cubic-bezier(.4,0,.2,1);
}

/* ── Reset ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Base ──────────────────────────────────────────────────────── */
html { height: 100%; }
body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 15px; line-height: 1.5; color: var(--white);
  min-height: 100%;
}

/* ── Topbar ────────────────────────────────────────────────────── */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  height: 56px; padding: 0 20px; background: var(--navy);
  border-bottom: 1px solid rgba(255,255,255,.07); position: relative;
}
.topbar-logo     { display: flex; align-items: center; font-size: 18px; font-weight: 800; color: var(--blue); text-decoration: none; letter-spacing: -.3px; }
.topbar-logo img { height: 28px; width: auto; display: block; mix-blend-mode: lighten; }
.topbar-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 14px; font-weight: 500; color: var(--gray-l); }
.topbar-actions { display: flex; gap: 8px; }
.btn-ghost {
  background: none; border: 1px solid rgba(255,255,255,.15); color: var(--gray-l);
  padding: 6px 14px; border-radius: var(--radius); font-size: 13px; font-family: inherit;
  cursor: pointer; transition: all .2s var(--ease);
}
.btn-ghost:hover { border-color: var(--gray); color: var(--white); }

/* ── Login ─────────────────────────────────────────────────────── */
.login-wrapper {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--navy) radial-gradient(ellipse 60% 50% at 50% 40%, rgba(29,114,245,.12) 0%, transparent 70%);
  padding: 24px;
}
.login-card {
  background: var(--white); color: #0f172a; border-radius: var(--radius-l);
  padding: 40px 36px; width: 100%; max-width: 400px;
  box-shadow: var(--shadow); animation: cardIn .4s var(--ease) both;
}
.login-brand      { text-align: center; margin-bottom: 28px; }
.login-brand-logo { height: 36px; width: auto; filter: invert(1) sepia(1) saturate(3) hue-rotate(195deg); }
.login-brand-sub  { font-size: 13px; color: var(--gray); margin-top: 8px; }
.form-group   { margin-bottom: 16px; }
.form-label   { display: block; font-size: 13px; font-weight: 500; color: var(--gray); margin-bottom: 6px; }
.form-input {
  width: 100%; padding: 10px 14px; border: 1.5px solid var(--gray-xl);
  border-radius: var(--radius); font-family: inherit; font-size: 15px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease); outline: none;
}
.form-input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(29,114,245,.15); }
.pass-wrapper { position: relative; }
.pass-input   { padding-right: 44px; }
.pass-toggle  { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; font-size: 16px; line-height: 1; }
.btn-primary {
  width: 100%; padding: 11px; background: var(--blue); color: var(--white);
  border: none; border-radius: var(--radius); font-family: inherit; font-size: 15px;
  font-weight: 600; cursor: pointer; transition: background .2s var(--ease); margin-top: 4px;
}
.btn-primary:hover:not(:disabled) { background: var(--blue-h); }
.btn-primary:disabled { opacity: .6; cursor: not-allowed; }
.login-error {
  background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.3);
  color: var(--red); border-radius: var(--radius); padding: 10px 14px;
  font-size: 13px; margin-bottom: 16px; animation: shake .35s var(--ease);
}
.login-footer { text-align: center; font-size: 12px; color: var(--gray-l); margin-top: 24px; }

/* ── Dashboard ─────────────────────────────────────────────────── */
.dashboard-body     { background: var(--navy-d); min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; }
.dashboard-content  { width: 100%; max-width: 720px; padding: 40px 24px 48px; }
.dashboard-header   { text-align: center; margin-bottom: 32px; }
.dashboard-header h1 { font-size: 22px; font-weight: 700; }
.dashboard-header p  { color: var(--gray-l); font-size: 14px; margin-top: 4px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.card {
  background: var(--navy-l); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-l);
  padding: 24px; cursor: pointer; transition: all .2s var(--ease); text-align: center;
  animation: fadeUp .4s var(--ease) calc(var(--i, 0) * 80ms) both;
}
.card:hover { border-color: var(--blue); box-shadow: 0 4px 20px rgba(29,114,245,.2); transform: translateY(-2px); }
.card-icon   { font-size: 28px; margin-bottom: 12px; }
.card h2     { font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.card p      { font-size: 13px; color: var(--gray-l); margin-bottom: 16px; }
.badge {
  display: inline-block; padding: 3px 10px; border-radius: 99px;
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 16px;
}
.badge-green { background: rgba(34,197,94,.12); color: var(--green); }
.badge-blue  { background: rgba(29,114,245,.12); color: var(--blue); }
.btn-card {
  width: 100%; padding: 9px; background: rgba(29,114,245,.12); color: var(--blue);
  border: 1px solid rgba(29,114,245,.25); border-radius: var(--radius); font-family: inherit;
  font-size: 14px; font-weight: 500; cursor: pointer; transition: all .2s var(--ease);
}
.btn-card:hover { background: var(--blue); color: var(--white); }
.dash-footer { text-align: center; padding: 24px; font-size: 12px; color: var(--gray); }

/* ── Viewer ────────────────────────────────────────────────────── */
.viewer-body    { margin: 0; height: 100vh; display: flex; flex-direction: column; }
.viewer-wrapper { display: flex; flex-direction: column; height: 100vh; background: var(--navy); }
.viewer-wrapper iframe { flex: 1; border: none; background: var(--white); }


/* ── Keyframes ─────────────────────────────────────────────────── */
@keyframes cardIn  { from { opacity: 0; transform: scale(.96) translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fadeUp  { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes shake   { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Topbar */
  .topbar         { padding: 0 14px; gap: 8px; }
  .topbar-title   { display: none; }
  .topbar-logo img { height: 22px; }
  .btn-ghost      { padding: 8px 10px; font-size: 12px; min-height: 36px; }

  /* Login */
  .login-wrapper  { padding: 16px; align-items: flex-start; padding-top: 48px; }
  .login-card     { padding: 28px 20px; }
  .form-input     { font-size: 16px; } /* evita zoom en iOS */
  .btn-primary    { padding: 13px; font-size: 16px; min-height: 48px; }

  /* Dashboard */
  .dashboard-content  { padding: 24px 16px 32px; }
  .dashboard-header   { margin-bottom: 20px; }
  .dashboard-header h1 { font-size: 19px; }
  .cards          { grid-template-columns: 1fr; gap: 12px; }
  .btn-card       { padding: 12px; min-height: 44px; font-size: 15px; }
}