/* LMS Somfy · paleta tomada de somfypro.es: azul petróleo + amarillo Somfy */
@font-face { font-family: "Carlito"; src: url("../fonts/Carlito-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Carlito"; src: url("../fonts/Carlito-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  --petrol: #25485a; --petrol-deep: #1e3a48; --petrol-ink: #16303d; --petrol-soft: #3c6377;
  --yellow: #fab800; --yellow-deep: #e0a400; --yellow-pale: #fff4cf;
  --paper: #ffffff; --mist: #eef2f4; --line: #d6dfe4; --ink: #1c2b36; --muted: #5a6c78;
  --ok: #2c7a58; --ok-bg: #e5f4ec; --err: #b3261e; --err-bg: #fdeceb; --info-bg: #e6f0f6; --warn-bg: #fff4cf;
  --r: 12px; --r-lg: 22px;
  --font: "Carlito", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 1.125rem/1.5 var(--font); color: var(--ink); background: var(--mist); min-height: 100vh; display: flex; flex-direction: column; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .6rem; color: var(--petrol-ink); }
h1 { font-size: 2rem; } h2 { font-size: 1.45rem; } h3 { font-size: 1.15rem; }
p { margin: 0 0 1rem; max-width: 68ch; }
a { color: var(--petrol); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--petrol-ink); }
img, svg { max-width: 100%; }
small, .small { font-size: .9rem; } .muted { color: var(--muted); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; border-radius: 6px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 1.5rem 0; }

/* ---------- botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font: 700 1rem/1.2 var(--font); padding: .75rem 1.5rem; border-radius: 999px; border: 2px solid var(--yellow); background: var(--yellow); color: var(--petrol-ink); text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--yellow-deep); border-color: var(--yellow-deep); color: var(--petrol-ink); }
.btn-ghost { background: transparent; border-color: var(--petrol); color: var(--petrol); }
.btn-ghost:hover { background: var(--petrol); border-color: var(--petrol); color: #fff; }
.btn-danger { background: transparent; border-color: var(--err); color: var(--err); }
.btn-danger:hover { background: var(--err); border-color: var(--err); color: #fff; }
.btn-sm { padding: .4rem 1rem; font-size: .92rem; }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }

/* ---------- formularios ---------- */
label, .label { display: block; font-weight: 700; margin-bottom: .3rem; }
input[type=text], input[type=email], input[type=tel], input[type=password], input[type=date], input[type=number], input[type=search], select, textarea {
  width: 100%; font: inherit; color: var(--ink); background: #fff; border: 1.5px solid #aebcc5; border-radius: 10px; padding: .65rem .8rem; }
input:focus, select:focus, textarea:focus { border-color: var(--petrol); outline: 3px solid var(--yellow); outline-offset: 0; }
textarea { min-height: 6rem; resize: vertical; }
input[type=checkbox], input[type=radio] { accent-color: var(--petrol); width: 1.15rem; height: 1.15rem; flex: none; }
.field { margin-bottom: 1.1rem; }
.hint { color: var(--muted); font-size: .92rem; margin-top: .25rem; }
.field-error { color: var(--err); font-weight: 700; font-size: .95rem; margin-top: .3rem; }
.field.has-error input, .field.has-error select { border-color: var(--err); }
.check { display: flex; gap: .65rem; align-items: flex-start; font-weight: 400; }
.check input { margin-top: .25rem; }
.grid-2 { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }

/* ---------- avisos ---------- */
.flash { border-radius: var(--r); padding: .8rem 1rem; margin: 0 0 1rem; border: 1px solid transparent; font-weight: 700; }
.flash-ok { background: var(--ok-bg); color: #155238; border-color: #b5dcc7; }
.flash-error { background: var(--err-bg); color: #8c1a13; border-color: #f2c2be; }
.flash-info { background: var(--info-bg); color: var(--petrol-ink); border-color: #bcd4e1; }
.notice { background: var(--warn-bg); border: 1px solid #f1d46b; border-radius: var(--r); padding: .8rem 1rem; margin: 0 0 1.2rem; }
.secret { font: 700 1.5rem/1.2 "Courier New", monospace; letter-spacing: .08em; background: #fff; border: 2px dashed var(--petrol); border-radius: var(--r); padding: .7rem 1rem; display: inline-block; user-select: all; }

/* ---------- etiquetas de estado ---------- */
.pill { display: inline-block; font-size: .85rem; font-weight: 700; padding: .12rem .65rem; border-radius: 999px; background: var(--mist); color: var(--petrol-ink); white-space: nowrap; }
.pill-ok { background: var(--ok-bg); color: #155238; } .pill-warn { background: var(--warn-bg); color: #6b4f00; }
.pill-off { background: #e7eaec; color: #55636d; }

/* ================= Área de asistentes (fondo petróleo) ================= */
body.t-public { background: var(--petrol); }
.topbar { background: var(--petrol-deep); color: #fff; }
.topbar-in { max-width: 1100px; margin: 0 auto; padding: .7rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: .7rem; color: #fff; text-decoration: none; font-weight: 700; }
.brand img { height: 30px; width: auto; display: block; }
.brand span { font-size: 1rem; padding-left: .7rem; border-left: 1px solid rgba(255,255,255,.35); }
.topnav { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.topnav a, .topnav button { color: #fff; font: 700 .95rem var(--font); text-decoration: none; padding: .35rem .9rem; border-radius: 999px; background: none; border: 0; cursor: pointer; }
.topnav a:hover, .topnav button:hover, .topnav a[aria-current=page] { background: rgba(255,255,255,.14); }
.stage { flex: 1; width: 100%; max-width: 1100px; margin: 0 auto; padding: clamp(1rem, 4vw, 2.5rem) 1.25rem 3rem; }
.card { background: var(--paper); border-radius: var(--r-lg); padding: clamp(1.25rem, 4vw, 2.25rem); max-width: 680px; margin: 0 auto 1.25rem; box-shadow: 0 10px 30px rgba(10, 30, 40, .28); }
.card-wide { max-width: 860px; }
.card h1 { margin-bottom: .4rem; }
.lead { font-size: 1.2rem; color: var(--muted); }
.site-foot { color: rgba(255,255,255,.75); text-align: center; font-size: .92rem; padding: 0 1.25rem 1.5rem; }
.site-foot a { color: #fff; }
.tabs { display: flex; gap: .3rem; background: var(--mist); padding: .3rem; border-radius: 999px; margin: 1.2rem 0 1.4rem; }
.tabs a { flex: 1; text-align: center; padding: .55rem .5rem; border-radius: 999px; text-decoration: none; font-weight: 700; color: var(--muted); }
.tabs a[aria-current=page] { background: #fff; color: var(--petrol-ink); box-shadow: 0 1px 4px rgba(0,0,0,.18); }
.meta { display: flex; flex-wrap: wrap; gap: .35rem 1.4rem; color: var(--muted); margin: 0 0 1rem; padding: 0; list-style: none; }
.meta strong { color: var(--ink); }

.steps { list-style: none; margin: 1.2rem 0; padding: 0; display: grid; gap: .6rem; }
.step { display: flex; gap: .9rem; align-items: center; border: 1.5px solid var(--line); border-radius: var(--r); padding: .8rem 1rem; }
.step-n { flex: none; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--mist); display: grid; place-items: center; font-weight: 700; }
.step.done { border-color: #b5dcc7; background: #f4fbf7; } .step.done .step-n { background: var(--ok); color: #fff; }
.step.next { border-color: var(--yellow); background: var(--yellow-pale); } .step.next .step-n { background: var(--yellow); color: var(--petrol-ink); }
.step-body { flex: 1; min-width: 0; } .step-title { font-weight: 700; } .step-sub { color: var(--muted); font-size: .92rem; }
.done-panel { display: flex; gap: 1.4rem; align-items: center; background: var(--yellow-pale); border-radius: var(--r-lg); padding: 1.2rem 1.4rem; margin: 1.2rem 0; flex-wrap: wrap; }
.medal { width: 112px; height: 112px; flex: none; }

.session-card { border: 1.5px solid var(--line); border-radius: var(--r); padding: 1rem 1.15rem; margin-bottom: .8rem; display: flex; gap: 1rem; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.session-card h3 { margin-bottom: .15rem; }

/* ---------- test ---------- */
.q-card { border: 1.5px solid var(--line); border-radius: var(--r); padding: 1.1rem 1.15rem 1.2rem; margin-bottom: 1rem; }
.q-card.missing { border-color: var(--err); background: var(--err-bg); }
.q-title { font-weight: 700; font-size: 1.15rem; margin-bottom: .2rem; padding: 0; float: left; width: 100%; }
.q-hint { color: var(--muted); font-size: .92rem; margin: 0 0 .7rem; clear: both; }
.choice { display: flex; gap: .7rem; align-items: center; font-weight: 400; border: 1.5px solid var(--line); border-radius: 12px; padding: .7rem .9rem; margin-bottom: .5rem; cursor: pointer; }
.choice:hover { border-color: var(--petrol-soft); }
.choice:has(input:checked) { border-color: var(--petrol); background: var(--yellow-pale); }
.test-bar { position: sticky; top: 0; z-index: 5; background: var(--paper); margin: -.4rem -.4rem 1.2rem; padding: .6rem .4rem; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.review-q { border: 1.5px solid var(--line); border-radius: var(--r); padding: 1rem 1.15rem; margin-bottom: .9rem; }
.review-q.ok { border-color: #b5dcc7; } .review-q.ko { border-color: #f2c2be; }
.review-opt { display: flex; gap: .6rem; padding: .35rem .6rem; border-radius: 8px; align-items: baseline; }
.review-opt.good { background: var(--ok-bg); } .review-opt.bad { background: var(--err-bg); }
.review-opt .tag { font-size: .8rem; font-weight: 700; margin-left: auto; white-space: nowrap; }
.scale { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; }
.scale label { margin: 0; }
.scale input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.scale span { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border: 1.5px solid #aebcc5; border-radius: 50%; font-weight: 700; cursor: pointer; background: #fff; }
.scale input:checked + span { background: var(--petrol); border-color: var(--petrol); color: #fff; }
.scale input:focus-visible + span { outline: 3px solid var(--yellow); outline-offset: 2px; }
.scale-ends { display: flex; justify-content: space-between; max-width: 28.6rem; color: var(--muted); font-size: .85rem; margin-top: .25rem; }

/* ================= Panel de administración ================= */
body.t-admin { background: var(--mist); }
.admin-top { background: var(--petrol-deep); color: #fff; position: sticky; top: 0; z-index: 10; }
.admin-top .topbar-in { max-width: 1240px; }
.admin-nav { display: flex; gap: .2rem; overflow-x: auto; padding: 0 .75rem .6rem; max-width: 1240px; margin: 0 auto; }
.admin-nav a { color: #dbe7ee; text-decoration: none; font-weight: 700; padding: .4rem .95rem; border-radius: 999px; white-space: nowrap; }
.admin-nav a:hover { background: rgba(255,255,255,.12); color: #fff; }
.admin-nav a[aria-current=page] { background: var(--yellow); color: var(--petrol-ink); }
.admin-main { flex: 1; width: 100%; max-width: 1240px; margin: 0 auto; padding: 1.6rem 1.25rem 3rem; }
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.page-head h1 { margin: 0; }
.crumbs { font-size: .95rem; color: var(--muted); margin-bottom: .3rem; }
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 1.25rem 1.35rem; margin-bottom: 1.2rem; }
.panel > h2:first-child, .panel > h3:first-child { margin-top: 0; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .8rem; }
.panel-head h2, .panel-head h3 { margin: 0; }
.cols { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); align-items: start; }
.cols > .panel { margin-bottom: 0; }
.kpis { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-bottom: 1.2rem; }
.kpi { background: var(--paper); border: 1px solid var(--line); border-left: 5px solid var(--yellow); border-radius: 12px; padding: .8rem 1rem; }
.kpi b { display: block; font-size: 1.7rem; line-height: 1.1; color: var(--petrol-ink); }
.kpi span { color: var(--muted); font-size: .92rem; }
.filters { display: flex; gap: .7rem; flex-wrap: wrap; align-items: flex-end; margin-bottom: 1rem; }
.filters .field { margin: 0; min-width: 140px; } .filters .grow { flex: 1; min-width: 200px; }
.table-wrap { overflow-x: auto; }
table.table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.table th { text-align: left; font-size: .92rem; color: var(--muted); padding: .55rem .7rem; border-bottom: 2px solid var(--line); white-space: nowrap; }
.table td { padding: .65rem .7rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.table tr:hover td { background: #f8fafb; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .actions { text-align: right; white-space: nowrap; }
.table form { display: inline; }
.empty { text-align: center; padding: 2rem 1rem; color: var(--muted); }
.mods-pick { display: grid; gap: .8rem; }
.mod-pick { border: 1.5px solid var(--line); border-radius: var(--r); padding: .9rem 1rem; }
.mod-pick.on { border-color: var(--petrol); background: #f6fafc; }
.mod-pick summary { cursor: pointer; font-weight: 700; margin-top: .5rem; }
.mod-row { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.mod-row .grow { flex: 1; min-width: 200px; } .mod-row input[type=number] { width: 5rem; }
.q-pick { display: block; font-weight: 400; padding: .3rem 0; }
.opt-row { display: grid; grid-template-columns: 1fr auto; gap: .6rem; align-items: center; margin-bottom: .5rem; }
.opt-row label.ok { display: flex; gap: .4rem; margin: 0; font-weight: 400; white-space: nowrap; align-items: center; }
.q-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.q-item { border: 1px solid var(--line); border-radius: var(--r); padding: .8rem 1rem; }
.q-item.off { opacity: .6; }
.q-item ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.q-item li.right { font-weight: 700; color: var(--ok); }
.qr-wrap { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; }
.qr { display: block; background: #fff; }
.qr-small { width: 150px; height: 150px; border: 1px solid var(--line); border-radius: 10px; }
.urlbox { font: 400 .95rem "Courier New", monospace; background: var(--mist); border-radius: 8px; padding: .4rem .6rem; word-break: break-all; }
.file-list { list-style: none; padding: 0; margin: 0 0 .8rem; display: grid; gap: .4rem; }
.file-list li { display: flex; gap: .6rem; align-items: center; justify-content: space-between; border: 1px solid var(--line); border-radius: 10px; padding: .45rem .8rem; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1.2rem; margin: 0; } .kv dt { color: var(--muted); } .kv dd { margin: 0; }

/* gráficos */
.chart { width: 100%; height: auto; display: block; }
.ch-bar { fill: var(--yellow); } .ch-bar.ch-good { fill: var(--petrol-soft); }
.ch-track { fill: #edf1f3; } .ch-axis { stroke: var(--line); stroke-width: 1; }
.ch-label { fill: var(--muted); font: 400 13px var(--font); text-anchor: middle; }
.ch-val { fill: var(--ink); font: 700 13px var(--font); text-anchor: middle; }
.ch-left { text-anchor: start; }

/* ---------- QR a pantalla completa ---------- */
body.qr-page { margin: 0; background: #fff; min-height: 100vh; display: grid; place-items: center; }
.qr-full { width: min(94vmin, 1000px); height: min(94vmin, 1000px); cursor: zoom-in; }

.login-wrap { max-width: 430px; margin: 4rem auto; padding: 0 1.25rem; }
@media (max-width: 640px) {
  body { font-size: 1.05rem; } h1 { font-size: 1.65rem; }
  .brand span { display: none; }
  .table th, .table td { padding: .5rem .45rem; }
}
@media print { .topbar, .admin-top, .site-foot, .btn, .btn-row { display: none !important; } body { background: #fff; } }
.pillrow { margin-top: .4rem; }
.danger-zone { margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.legal h2 { margin-top: 1.6rem; font-size: 1.25rem; } .legal ul { padding-left: 1.2rem; max-width: 68ch; } .legal li { margin-bottom: .35rem; }
.inline-form { display: inline; }
.stack > * + * { margin-top: .6rem; }

.cols-charts { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); align-items: start; margin-bottom: 1.2rem; }
.cols-charts > .panel { margin-bottom: 0; }
.table .num { white-space: nowrap; }