/* Portal de documentos MestrIA.
   Paleta, tipografia y componentes portados de platform.html de SERVEO sin
   redisenar. Lo anadido aqui es el codigo de un solo uso, el selector de idioma
   y los estados de una solicitud de acceso. */

:root {
  --bg-0: #f6f8fc;
  --bg-1: #ffffff;
  --bg-3: #eef2f8;
  --border: #e1e8f0;
  --text-1: #0f1c2e;
  --text-2: #5a6b80;
  --text-3: #93a1b3;
  --primary: #7e22ce;
  --primary-deep: #6b21a8;
  --primary-tint: #f3e8ff;
  --accent: #9333ea;
  --cyan: #0891b2;
  --cyan-tint: #e0f5fa;
  --success: #16a34a;
  --success-bg: #f0fdf4;
  --warn: #b45309;
  --warn-bg: #fffbeb;
  --danger: #dc2626;
  --danger-bg: #fef2f2;
  --dark-0: #0e1a2b;
  --dark-1: #091320;
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 2px 10px rgba(15, 28, 46, 0.06);
  --shadow-md: 0 4px 24px rgba(15, 28, 46, 0.10);
  --font: 'Quicksand', -apple-system, 'Segoe UI', sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--font); background: var(--bg-0); color: var(--text-1); min-height: 100vh; line-height: 1.55; }
a { color: var(--primary); text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
[hidden] { display: none !important; }

/* Logo vivo de mestria.es, en CSS+SVG. No se usan los JPG del brand-kit. */
.logo { display: inline-flex; align-items: center; gap: 10px; color: inherit; }
.logo-mark { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg, var(--primary-deep), var(--accent)); color: #fff; flex: none; }
.logo-text { font-size: 20px; font-weight: 700; letter-spacing: -0.3px; }
.logo-text .ia { color: var(--accent); }
.login-brand .logo-text .ia { color: #22d3ee; }
.login-brand .logo { position: relative; z-index: 1; }

.trust { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.trust-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; font-size: 11.5px; font-weight: 600; color: var(--text-2); background: var(--bg-1); border: 1px solid var(--border); border-radius: 999px; }
.trust-badge svg { color: var(--cyan); flex: none; }
.trust-badge .eu { color: #003399; }
.trust-note { width: 100%; text-align: center; font-size: 11px; color: var(--text-3); margin-top: 4px; }

/* ── LOGIN ─────────────────────────────────────────────── */
.login-wrap { display: grid; grid-template-columns: minmax(380px, 44%) 1fr; min-height: 100vh; }
.login-brand { position: relative; overflow: hidden; color: #fff; background: var(--dark-0); display: flex; flex-direction: column; justify-content: space-between; padding: 48px 52px; }
.login-brand::before, .login-brand::after { content: ""; position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55; pointer-events: none; }
.login-brand::before { width: 480px; height: 480px; background: #6b21a8; top: -140px; right: -160px; }
.login-brand::after { width: 420px; height: 420px; background: #0891b2; bottom: -160px; left: -140px; opacity: .35; }
.brand-body { position: relative; z-index: 1; margin: auto 0; max-width: 420px; }
.brand-body h1 { font-size: 30px; font-weight: 700; line-height: 1.25; letter-spacing: -0.4px; margin-bottom: 14px; }
.brand-body h1 em { font-style: normal; color: #22d3ee; }
.brand-body p { color: rgba(255,255,255,.72); font-size: 15px; margin-bottom: 30px; }
.brand-modules { display: grid; gap: 10px; font-size: 13.5px; }
.brand-modules span { display: flex; align-items: center; gap: 9px; color: rgba(255,255,255,.85); }
.brand-modules svg { color: #22d3ee; flex: none; }
.brand-foot { position: relative; z-index: 1; font-size: 12px; color: rgba(255,255,255,.45); }

.login-panel { display: flex; align-items: center; justify-content: center; padding: 40px 24px; position: relative; }
.login-card { width: 100%; max-width: 400px; }
.login-card h2 { font-size: 24px; font-weight: 700; letter-spacing: -0.3px; margin-bottom: 6px; }
.login-card .sub { color: var(--text-2); font-size: 14px; margin-bottom: 28px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.field input { width: 100%; padding: 11px 14px; font: inherit; font-size: 14.5px; color: var(--text-1); background: var(--bg-1); border: 1.5px solid var(--border); border-radius: var(--radius-sm); transition: border-color .15s, box-shadow .15s; }
.field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--primary-tint); }
.btn-primary { width: 100%; padding: 12px; font: inherit; font-size: 15px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--primary-deep), var(--accent)); border: 0; border-radius: var(--radius-sm); cursor: pointer; box-shadow: var(--shadow); transition: transform .12s, box-shadow .12s; }
.btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-primary:disabled { opacity: .55; cursor: progress; transform: none; }
.btn-plain { width: 100%; margin-top: 12px; padding: 11px; font: inherit; font-size: 14px; font-weight: 600; color: var(--text-1); background: var(--bg-1); border: 1.5px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; }
.btn-plain:hover { background: var(--bg-3); }
.login-alt { margin-top: 22px; text-align: center; font-size: 13px; color: var(--text-2); }
.link-btn { background: none; border: 0; padding: 0; font: inherit; font-size: inherit; color: var(--primary); font-weight: 600; cursor: pointer; text-decoration: none; }
.link-btn:hover { text-decoration: underline; }

/* Codigo de un solo uso: monoespaciada y espaciada para que se lea de un vistazo. */
.field input.otp { font-family: var(--mono); font-size: 26px; font-weight: 600; letter-spacing: 12px; text-align: center; padding: 12px 14px 12px 26px; }

/* Aviso: el estado neutro es informativo, no una alarma. */
.aviso { display: none; margin-bottom: 18px; padding: 11px 14px; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 600; border: 1px solid transparent; }
.aviso[data-tipo] { display: block; }
.aviso[data-tipo="info"] { background: var(--cyan-tint); border-color: #b6e3ef; color: #05606e; }
.aviso[data-tipo="ok"] { background: var(--success-bg); border-color: #bbf7d0; color: var(--success); }
.aviso[data-tipo="aviso"] { background: var(--warn-bg); border-color: #fde68a; color: var(--warn); }
.aviso[data-tipo="error"] { background: var(--danger-bg); border-color: #fecaca; color: var(--danger); }

/* Selector de idioma */
.lang { position: absolute; top: 20px; right: 24px; display: inline-flex; gap: 2px; padding: 3px; background: var(--bg-1); border: 1px solid var(--border); border-radius: 999px; }
.lang button { padding: 4px 12px; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--text-3); background: none; border: 0; border-radius: 999px; cursor: pointer; text-transform: uppercase; }
.lang button[aria-pressed="true"] { background: var(--primary-tint); color: var(--primary-deep); }

/* ── APP ──────────────────────────────────────────────── */
.topbar { display: flex; align-items: center; gap: 16px; padding: 14px 28px; background: var(--bg-1); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10; }
.topbar .spacer { flex: 1; }
.topbar nav { display: flex; gap: 4px; }
.topbar nav a { padding: 7px 13px; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.topbar nav a:hover, .topbar nav a[aria-current="page"] { background: var(--bg-3); color: var(--text-1); }
.user-menu { position: relative; }
.user-menu summary { list-style: none; display: flex; align-items: center; gap: 9px; cursor: pointer; padding: 4px 6px; border-radius: 999px; }
.user-menu summary::-webkit-details-marker { display: none; }
.user-menu summary:hover { background: var(--bg-3); }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--primary-deep), var(--cyan)); color: #fff; font-size: 13px; font-weight: 700; }
.user-name { font-size: 13.5px; font-weight: 600; color: var(--text-2); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropdown { position: absolute; right: 0; top: calc(100% + 8px); min-width: 200px; background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); padding: 6px; z-index: 20; }
.dropdown a, .dropdown button { display: block; width: 100%; text-align: left; padding: 9px 12px; border: 0; background: none; font: inherit; border-radius: 6px; font-size: 13.5px; font-weight: 500; color: var(--text-1); cursor: pointer; }
.dropdown a:hover, .dropdown button:hover { background: var(--bg-3); }
.dropdown hr { border: 0; border-top: 1px solid var(--border); margin: 6px 4px; }
.dropdown .out { color: var(--danger); }

.main { max-width: 1080px; margin: 0 auto; padding: 44px 28px 64px; }
.head { margin-bottom: 30px; }
.head h1 { font-size: 26px; font-weight: 700; letter-spacing: -0.4px; }
.head p { color: var(--text-2); font-size: 14.5px; }
.badge { font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.badge.on { background: var(--success-bg); color: var(--success); }
.badge.off { background: var(--bg-3); color: var(--text-3); }
.badge.wait { background: var(--warn-bg); color: var(--warn); }

@media (max-width: 860px) {
  .login-wrap { grid-template-columns: 1fr; }
  .login-brand { display: none; }
  .topbar nav { display: none; }
}