@font-face {font-family:Inter;src:url('./fonts/InterVariable.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
/* RENDBEAT 1.1: one clear theme, independent of system or old stored preference. */
:root {
 color-scheme:light;
 --bg:#F5F7F3; --surface:#FFFFFF; --surface-2:#EDF7DF; --surface-3:#E3EDD8;
 --text:#11171F; --muted:#4B5B4F; --input:#FFFFFF;
 --border:#D5DED2; --border-strong:#73816D; --control-border:#73816D;
 --accent:#7DD904; --accent-strong:#72C900; --accent-ring:#EDF7DF; --reading-green:#336B00;
 --focus:#336B00; --success:#336B00; --danger:#B42318; --danger-bg:#FFF3F2;
 --warning:#865A00; --warning-bg:#FFF5DE;
 --shadow:0 16px 48px #11171F26;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: Inter, Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 1.5;
 font-variant-numeric:tabular-nums;
}

button,
input,
select {
	font: inherit;
}

button {
	min-height: 44px;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: var(--surface);
	color: var(--text);
	cursor: pointer;
	font-weight: 700;
	padding: 0 12px;
}

button:hover:not(:disabled) {
	border-color: var(--border-strong);
	background: var(--surface-3);
}

button.primary {
	border-color: var(--accent);
	background: var(--accent);
	color: var(--text);
}

button.primary:hover:not(:disabled) {
	border-color: var(--reading-green);
	background: var(--accent-strong);
}

button.danger {
	border-color: rgba(255, 107, 98, 0.36);
	background: var(--danger-bg);
	color: var(--danger);
}

button.icon {
	width: 36px;
	padding: 0;
}

button:disabled {
	cursor: not-allowed;
	opacity: 0.55;
}

button:focus-visible,
input:focus-visible,
select:focus-visible {
	outline: 3px solid var(--accent-ring);
	outline-offset: 2px;
}

input,
select {
	width: 100%;
	min-height: 44px;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: var(--input);
	color: var(--text);
	padding: 8px 10px;
}

label {
	display: grid;
	gap: 5px;
	color: var(--muted);
	font-weight: 650;
}

code {
	font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

.app-shell {
	min-height: 100vh;
}

.login {
	display: grid;
	place-items: center;
	min-height: 100vh;
	padding: 24px;
}

.login form {
	width: min(440px, 100%);
	display: grid;
	gap: 18px;
	padding: 30px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-top: 4px solid var(--accent);
	border-radius: 12px;
	box-shadow: var(--shadow);
}

.login-brand,
.brand,
.topbar,
.panel-header,
.view-header,
.form-actions,
.row-actions,
.topbar-actions {
	display: flex;
	align-items: center;
}

.login-brand,
.brand {
	gap: 12px;
}

.login-brand h1,
.view-header h1,
.panel h2 {
	margin: 0;
	letter-spacing: 0;
}

.login-brand span {
	color: var(--muted);
	font-weight: 700;
}

.layout {
	min-height: 100vh;
	display: grid;
	grid-template-columns: 260px 1fr;
}

.sidebar {
	position: sticky;
	top: 0;
	height: 100vh;
	padding: 18px;
	background: var(--surface);
	border-right: 1px solid var(--border);
}

.brand {
	margin-bottom: 24px;
	color: var(--text);
}

.nav {
	display: grid;
	gap: 8px;
}

.nav button {
	width: 100%;
	justify-content: flex-start;
	text-align: left;
}

.nav button.active {
	border-color: var(--reading-green);
 box-shadow:inset 3px 0 var(--reading-green);
	background: var(--surface-2);
	color: var(--reading-green);
}

.content {
	min-width: 0;
	padding: 18px 22px 34px;
}

.topbar {
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 22px;
	padding: 12px 0;
}

.topbar-user {
	display: grid;
	gap: 2px;
}

.role-label {
	color: var(--muted);
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
}

.topbar-actions,
.form-actions,
.row-actions {
	gap: 8px;
}

.view {
	display: grid;
	gap: 18px;
}

.metric-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}

.metric {
	min-height: 76px;
	display: grid;
	align-content: center;
	gap: 4px;
	padding: 14px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 8px;
}

.metric span {
	color: var(--muted);
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
}

.metric strong {
	font-size: 22px;
	letter-spacing: 0;
}

.panel {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 24px;
}

.panel-header,
.view-header {
	justify-content: space-between;
	gap: 12px;
}

.form-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}

.form-grid .panel-header,
.form-grid .wide {
	grid-column: 1 / -1;
}

.inline-form {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 12px;
	align-items: end;
}

.sessions-filter {
	display: grid;
	grid-template-columns: 150px minmax(180px, 1fr) minmax(220px, 1fr) 110px auto;
	gap: 12px;
	align-items: end;
}

.sessions-filter-actions {
	padding-bottom: 0;
}

.sessions-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.85fr);
	gap: 18px;
	align-items: start;
}

.session-detail {
	display: grid;
	gap: 16px;
	position: sticky;
	top: 18px;
}

.empty-detail {
	min-height: 220px;
	align-content: start;
}

.detail-metrics {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.chart-panel {
	min-height: 260px;
	display: grid;
	align-items: center;
	overflow: hidden;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: var(--surface-2);
}

.chart-empty {
	padding: 44px 16px;
	color: var(--muted);
	text-align: center;
	font-weight: 700;
}

.hr-chart {
	width: 100%;
	height: auto;
	display: block;
}

.chart-axis {
	stroke: var(--border-strong);
	stroke-width: 1;
}

.chart-grid {
	stroke: var(--border);
	stroke-width: 1;
}

.chart-area {
	fill: var(--accent-ring);
}

.chart-line {
	fill: none;
	stroke: var(--reading-green);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.chart-dot {
	fill: var(--surface);
	stroke: var(--reading-green);
	stroke-width: 2;
}

.chart-label {
	fill: var(--muted);
	font-size: 11px;
	font-weight: 700;
}

.checkbox {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-top: 23px;
}

.checkbox input {
	width: auto;
	min-height: auto;
}

.table-wrap {
	overflow: auto;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 8px;
}

table {
	width: 100%;
	border-collapse: collapse;
	min-width: 760px;
}

th,
td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--border);
	text-align: left;
	vertical-align: middle;
}

th {
	color: var(--muted);
	font-size: 12px;
	text-transform: uppercase;
}

tr:last-child td {
	border-bottom: 0;
}

.selected-row td {
	background: var(--surface-2);
}

.status-pill {
	display: inline-flex;
	align-items: center;
	min-height: 26px;
	padding: 0 9px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 850;
}

.status-pill.active {
	background: var(--surface-2);
	color: var(--success);
}

.status-pill.ended {
	background: var(--surface-3);
	color: var(--muted);
}

.status-pill.stale {
	background: var(--danger-bg);
	color: var(--danger);
}

.empty,
.muted {
	color: var(--muted);
}

.error {
	margin: 0;
	padding: 10px 12px;
	border: 1px solid var(--danger);
	border-radius: 8px;
	background: var(--danger-bg);
	color: var(--danger);
	font-weight: 700;
}

.one-time {
	margin: 0;
	padding: 12px 14px;
	border: 1px solid rgba(34, 166, 106, 0.28);
	border-radius: 8px;
	background: var(--surface-2);
	color: var(--text);
}

.modal-backdrop {
	position: fixed;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 20px;
	background: rgba(0, 0, 0, 0.58);
}

.modal {
	width: min(460px, 100%);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 12px;
	box-shadow: var(--shadow);
}

.modal-header,
.modal-body {
	padding: 16px;
}

.modal-header {
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid var(--border);
}

@media (max-width: 820px) {
	.layout {
		grid-template-columns: 1fr;
	}

	.sidebar {
		position: static;
		height: auto;
	}

	.nav {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.topbar,
	.form-grid,
	.inline-form,
	.sessions-filter,
	.sessions-grid {
		grid-template-columns: 1fr;
	}

	.form-grid {
		display: grid;
	}

	.metric-grid,
	.detail-metrics {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.session-detail {
		position: static;
	}

	.topbar {
		align-items: stretch;
		flex-direction: column;
	}
}

.bracelet-row { display: flex; gap: 8px; margin-bottom: 8px; }
.bracelet-row input { flex: 1; min-width: 0; }
.bracelet-id { display: inline-block; padding: 3px 6px; margin: 2px; border: 1px solid var(--border); border-radius: 4px; }
/* Administration: dedicated reading and editing pages. */
[hidden] { display: none !important; }
.view-header h1, .editor-header h1 { margin: 0; font-size: 36px; line-height:1.15; letter-spacing:-.04em; overflow-wrap:anywhere; }
.editor-header { display: grid; justify-items: start; gap: 14px; }
.editor-page { max-width: 1080px; }
.editor-form { display: grid; gap: 18px; }
.editor-page .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.editor-page .panel > h2 { margin-bottom: 16px; }
.editor-page .panel:not(.form-grid) > label + label { margin-top: 14px; }
.editor-actions { position: static; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); flex-wrap: wrap; }
.editor-page { padding-bottom: 90px; }
.editor-page section[id] { scroll-margin-top: 18px; }
.section-index { display: flex; flex-wrap: wrap; gap: 8px; }
.section-index button { font-weight: 600; }
.filter-form, .sessions-filter { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 12px; align-items: end; }
.sessions-grid { display: block; }
.session-detail { position: static; }
.row-actions { flex-wrap: wrap; }
.row-menu { min-width: 125px; }
summary { cursor: pointer; font-weight: 700; padding: 9px 0; }
summary:focus-visible, a:focus-visible { outline: 3px solid var(--accent-ring); outline-offset: 3px; }
.row-menu > div { display: grid; gap: 8px; padding: 8px 0; }
.record-data { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.record-data dt { color: var(--muted); }
.record-data dd { margin: 5px 0 0; font-weight: 650; overflow-wrap: anywhere; }
.assignment-list { max-height: 350px; overflow: auto; margin: 12px 0; }
.assignment-list .checkbox { padding: 9px 0; }
.secret-key { display: block; padding: 18px; background: var(--surface-2); border-radius: 8px; overflow-wrap: anywhere; margin: 16px 0; user-select: all; }
.confirm-dialog { max-width: min(480px,calc(100vw - 32px)); border: 1px solid var(--border); border-radius: 10px; padding: 24px; background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.confirm-dialog::backdrop { background: rgba(0,0,0,.6); }
.confirm-dialog h2 { margin-top: 0; }
.confirm-dialog .form-actions { flex-wrap: wrap; justify-content: flex-end; }
.notice { padding: 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; }
#client-photo .profile-avatar { width: 112px; height: 112px; }
@media (max-width:820px) {
  .content { padding: 14px 12px 30px; }
  .editor-page .form-grid, .record-data { grid-template-columns: 1fr; }
  .view-header { flex-wrap: wrap; }
  .editor-actions { bottom: 8px; }
  .editor-actions button { flex: 1; }
  .panel { padding: 15px; }
  .topbar-actions { flex-wrap: wrap; }
}
/* Headings receive focus after navigation without an input-style outline. */
h1[tabindex="-1"]:focus { outline: none; }
@media (max-width: 820px) { .layout { grid-template-rows: auto 1fr; } }

/* Iteration 1: compact navigation and equivalent semantic mobile lists. */
button, input, select, summary { min-height: 44px; }
small, .muted, .role-label, .metric span, .status-pill { font-size: 13px; }
.content, .mobile-record, .options-dialog { overflow-wrap: anywhere; }
.mobile-brand, .mobile-nav, .mobile-records { display: none; }
.options-dialog { width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow-y: auto; padding: 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); }
.options-dialog::backdrop { background: rgba(0,0,0,.6); }
.options-dialog > button:last-child { margin-top: 16px; }
.options-dialog .nav { margin: 16px 0; }
.search-row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 8px; }
.client-search { display: grid; gap: 8px; }
.client-search > button { justify-self: start; }
.client-search details .filter-form { margin-top: 8px; }
@media (max-width: 820px) {
  .sidebar, .topbar, .desktop-records { display: none; }
  .layout { display: block; }
  .content { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
  .mobile-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
  .mobile-brand .role-label { margin-left: auto; text-transform: none; }
  .mobile-nav { display: grid; grid-template-columns: 1fr 1.35fr .65fr; gap: 8px; position: fixed; z-index: 10; bottom: 0; left: 0; right: 0; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--border); }
  .mobile-nav button { padding: 0 6px; }
  .mobile-nav .active { border-color: var(--reading-green); color: var(--reading-green); background:var(--surface-2); box-shadow:inset 0 -2px var(--reading-green); }
  .mobile-records { display: grid; gap: 12px; padding: 0; margin: 0; list-style: none; }
  .mobile-record { display: grid; gap: 10px; min-width: 0; padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
  .mobile-record > div:first-child > div { font-weight: 700; font-size: 18px; }
  .mobile-record p { margin: 0; }
  .mobile-record details > div { margin: 8px 0; }
  .mobile-record .row-actions > .row-actions { display: contents; }
  input, select { font-size: 16px; min-width: 0; }
  .filter-form, .sessions-filter { grid-template-columns: minmax(0,1fr); }
  .view-header { align-items: center; }
  .metric strong { font-size: 20px; }
  .form-actions, .row-actions { flex-wrap: wrap; gap: 8px; }
}

/* Allow long option labels to shrink inside desktop filter columns as well. */
label, input, select { min-width: 0; }
input, select, .table-wrap { max-width: 100%; }

.view > * { min-width: 0; }

/* Client consultation and the single joint-save action bar. */
.client-scope { margin: 0 0 16px; color: var(--muted); }
.client-consult .panel { margin-bottom: 16px; }
.client-consult .record-data { margin: 16px 0; }
.client-identity { display: flex; align-items: center; gap: 16px; }
.client-identity .profile-avatar { flex: 0 0 64px; width: 64px; height: 64px; }
.client-bracelets { padding-left: 22px; overflow-wrap: anywhere; }
#access-intentions { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0; }
#access-notice, #access-error { margin-top: 12px; }
#access-error:empty, #access-notice:empty { display: none; }
#access-error { color: var(--danger, #b91c1c); }
#member-access-form { display: grid; gap: 12px; max-width: 600px; }
#section-data, #section-objective, #section-bracelets, #section-save { scroll-margin-top: 20px; }
@media (max-width: 820px) {
  .editor-page:has(.client-save-actions) { padding-bottom: calc(var(--client-actions-height, 90px) + 24px); }
  .client-save-actions { position: fixed; z-index: 9; left: 12px; right: 12px; bottom: calc(var(--client-nav-height, 68px) + 8px); margin: 0; display: flex; }
  .client-save-actions button { flex: 1; min-width: 0; }
  .client-actions-flow .client-save-actions { position: static; }
  .client-actions-flow .editor-page:has(.client-save-actions) { padding-bottom: 24px; }
  .client-identity { align-items: flex-start; }
}

@media (max-width: 820px) { .content:has(.client-save-actions) { padding-bottom: calc(var(--client-nav-height, 68px) + 20px); } }
/* Training consultation: explicit filters, historical chart and bounded original samples. */
.session-list .sessions-filter { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 20px; }
.session-person p { margin-top: 0; }
#session-applied { overflow-wrap: anywhere; scroll-margin-top: 20px; }
#session-applied:focus { outline: 3px solid var(--focus); outline-offset: 4px; }
.person-dialog { color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 12px; padding: 24px; width: min(640px,calc(100% - 24px)); max-height: calc(100dvh - 32px); overflow: auto; }
.person-dialog::backdrop { background: rgba(0,0,0,.65); }
.person-dialog form { display: grid; gap: 12px; margin: 20px 0; }
.person-dialog ul { padding: 0; list-style: none; }
.person-dialog li { padding: 14px 0; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.session-summary { margin-top: 20px; }
.session-detail .panel { margin-bottom: 20px; }
.session-detail progress { width: 100%; accent-color: var(--accent); }
#session-chart .hr-chart { width: 100%; height: auto; touch-action: pan-y; }
#session-chart .chart-line { fill: none; stroke: var(--reading-green); stroke-width: 2; }
#session-chart .chart-dot { fill: var(--reading-green); }
#session-chart .chart-label { fill: var(--muted); font-size: 14px; }
#session-chart .objective-band { fill: var(--success); opacity: .15; }
#session-chart .objective-boundary { stroke: var(--success); stroke-dasharray: 5 4; }
#chart-readout { display: block; min-height: 3em; margin: 14px 0; overflow-wrap: anywhere; }
.sample-table-scroll { overflow-x: auto; max-width: 100%; }
.session-list .form-actions { flex-wrap: wrap; }
.session-list [hidden] { display: none; }
@media(max-width:820px) { .session-detail .metric-grid { grid-template-columns: 1fr; } .session-list .form-actions button { flex: 1 1 130px; } #session-chart .chart-label { font-size: 28px; } }

.session-list .desktop-records td:nth-child(3) { white-space: nowrap; }
#session-chart .chart-grid { stroke: var(--border-strong); stroke-width: 1; }
#session-chart .objective-tick .chart-label { fill: var(--text); font-weight: 700; }
#session-chart .objective-tick .chart-grid { stroke: var(--success); stroke-dasharray: 5 4; }
#session-chart [data-sample-chart] { cursor: crosshair; }
#session-chart { position: relative; }
.chart-hover { position: fixed; z-index: 15; max-width: min(390px,calc(100vw - 16px)); padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--text); box-shadow: var(--shadow); pointer-events: none; font-size: 13px; }
.chart-announcement { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Iteración 5: claridad y accesibilidad en la gestión secundaria. */


button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
input,select{font-size:16px;border-color:var(--control-border)}
button:not(.primary):not(.danger){border-color:var(--control-border)}
button.danger{border-color:var(--danger)}
button,summary{min-height:44px}
small,.muted,.role-label,.metric span,.status-pill{font-size:14px}
.management-context{display:block;font-size:14px;font-weight:400;color:var(--muted);white-space:normal}
.brand,.mobile-brand{min-width:0}
.mobile-brand strong{min-width:0;overflow-wrap:anywhere}
.key-centers{max-width:400px;min-width:0}
.key-centers summary{overflow-wrap:anywhere}
.key-centers p{white-space:normal;overflow-wrap:anywhere}
.form-errors{scroll-margin-block:20px 110px;overflow-wrap:anywhere}
.form-errors ul{padding-left:20px}
.form-errors a{color:inherit;display:inline-block;padding-block:6px}
.form-errors button{margin-top:12px}
.form-errors:focus{outline:3px solid var(--focus);outline-offset:3px}
.editor-form .profile-field-error{color:var(--danger);display:block;margin-block:6px;font-size:14px}
.confirm-dialog p{white-space:pre-line;overflow-wrap:anywhere}
.member-points progress{width:100%;accent-color:var(--accent)}
.member-points td{vertical-align:top}
.member-points .points-score{font-size:16px}
#points-more-error{margin-block:16px;color:var(--danger)}
#app-busy{overflow-wrap:anywhere}
#gym-form .editor-actions,#user-form .editor-actions,#api-key-form .editor-actions,#point-target-form .editor-actions{position:static}
@media(max-width:820px){
 .mobile-brand{align-items:center;gap:10px;flex-wrap:wrap}
 .mobile-brand .role-label{margin-left:auto}
 .management-context{font-size:14px}
 .form-errors a,input,select,button,summary{scroll-margin-bottom:120px}
}
@media(max-height:500px){
 .mobile-nav{position:static}
 .content{padding-bottom:24px}
 .confirm-dialog{max-height:calc(100dvh - 20px);overflow:auto}
}

@media(max-width:820px){.client-actions-flow .mobile-nav{position:static}.client-actions-flow .content{padding-bottom:24px}}

thead th{font-size:14px}

/* Local wordmark and the operational context are separate from page titles. */
.brand-identity{display:grid;gap:8px;min-width:0;max-width:100%}
.brand-identity img{width:100%;max-width:224px;height:auto;display:block}
[data-brand-fallback]{font-size:24px;font-weight:700;color:var(--text);letter-spacing:-.04em}
.brand-identity .management-context{font-size:14px;font-weight:400;color:var(--muted)}
.login-brand{display:block}.login-brand img{max-width:250px}
.login h1{font-size:24px;line-height:1.3;letter-spacing:-.03em;margin:0}
.login form{box-shadow:none;border-top:1px solid var(--border)}
.panel h2{font-size:24px;line-height:1.3;letter-spacing:-.03em;overflow-wrap:anywhere}
h3{font-size:18px}a{color:var(--reading-green);text-underline-offset:4px}
input,select{min-height:44px}.form-actions,.row-actions{flex-wrap:wrap}
.metric{border-radius:12px}.metric strong{font-size:28px}
.brand{margin-block:12px 32px}.sidebar{padding:24px 18px;overflow-y:auto}
@media(max-width:820px){
 .brand-identity img{max-width:200px}.mobile-brand .brand-identity{max-width:calc(100% - 80px)}
 .view-header h1,.editor-header h1{font-size:28px}
 .panel{padding:20px}.login form{padding:24px}
}