/* Design tokens and shared components of the panel. Rules and values: docs/DESIGN.md.
   Loaded globally from main.tag before the page CSS, which reads these variables. */

body.brand-coes {
	--brand: #f39c12;
	--brand-strong: #f39c12;
	--brand-on: #151515;
	--brand-strong-hover: #151515;
	--brand-on-hover: #fff;
	--brand-soft: #fef5e7;
	--brand-text: #9a5b00; /* brand-coloured text on white; amber itself is 2.1:1 */
	--brand-ring: rgba(243, 156, 18, .25);
	--brand-logo: #d9820b;
}
body.brand-tusser {
	--brand: #3c8dbc;
	--brand-strong: #2a6f96;
	--brand-on: #fff;
	--brand-strong-hover: #235d7e;
	--brand-on-hover: #fff;
	--brand-soft: #ecf4f9;
	--brand-text: #2a6f96;
	--brand-ring: rgba(60, 141, 188, .25);
	--brand-logo: #2a6f96;
}
body {
	--ink: #2b3340;
	--text-2: #5a6470;
	--muted: #687280; /* lightest grey allowed for text: 4.9:1 on white */
	--placeholder: #9aa3ad;
	--line: #ebedf0;
	--line-input: #dfe3e8;
	--line-hover: #c9cfd6;
	--surface: #fff;
	--surface-2: #f7f8fa;
	--surface-3: #eef0f2;
	--canvas: #eef1f5;
	--danger: #c0392b;
	--danger-strong: #a93226;
	--danger-soft: #fdecec;
	--danger-line: #f3c9c4;
	--ok: #1e7b34;
	--ok-soft: #e7f4ea;
	--ok-line: #c6e5cd;
	--warn: #8a5a00;
	--warn-soft: #fff4e0;
	--warn-line: #f5dcae;
	--info: #1f5f8b;
	--info-soft: #e8f1f8;
	--info-line: #c9dceb;
	--r-control: 6px;
	--r-card: 10px;
	--r-pill: 999px;
	--shadow-card: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .10);
	--shadow-pop: 0 8px 24px rgba(16, 24, 40, .16);
	--h-control: 38px;
	/* Spacing scale (4 px base). Which step goes where: docs/DESIGN.md "Spacing". */
	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 12px;
	--sp-4: 16px;
	--sp-5: 20px;
	--sp-6: 24px;
	--sp-8: 32px;
	/* Only for pill/badge vertical padding and icon nudges, where 4 px breaks the component. */
	--sp-nudge: 2px;
	--page-pad: var(--sp-5);
	--card-gap: var(--sp-5);
	--card-pad: var(--sp-5);
	--block-gap: var(--sp-4);
	--tile-pad: var(--sp-4);
	--control-gap: var(--sp-2);
	color: var(--ink);
	font-size: 14px;
}
.content-wrapper { background: var(--canvas); }

/* ---------- Page spacing (replaces AdminLTE 15 px edge and Bootstrap 30 px gutter) ---------- */
.content-wrapper .content-header { padding: var(--page-pad) var(--page-pad) 0; }
.content-wrapper section.content { padding: var(--page-pad); }
.content-wrapper .row {
	margin-left: calc(var(--card-gap) / -2);
	margin-right: calc(var(--card-gap) / -2);
}
.content-wrapper .row > [class*="col-"] {
	padding-left: calc(var(--card-gap) / 2);
	padding-right: calc(var(--card-gap) / 2);
}
.content-wrapper .list-card,
.content-wrapper .nav-tabs-custom { margin-bottom: var(--card-gap); }
/* AdminLTE gives .clearfix margin-bottom: 5px !important, off the scale. */
.content-wrapper .clearfix { margin-bottom: 0 !important; }

/* ---------- Page header ---------- */
.ui-page-header .breadcrumb {
	position: static;
	float: none;
	margin: 0 0 var(--control-gap);
	padding: 0;
	background: none;
	border-radius: 0;
	font-size: 13px;
	color: var(--muted);
}
.ui-page-header .breadcrumb > li + li::before { content: "/"; color: var(--line-hover); padding: 0 var(--sp-2); }
.ui-page-header .breadcrumb a { color: var(--text-2); }
.ui-page-header .breadcrumb a:hover { color: var(--brand-text); }
.ui-page-header .breadcrumb > li[aria-current] { color: var(--muted); }
.ui-page-head-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
}
.content-header.ui-page-header > .ui-page-head-row > h1 {
	margin: 0;
	font-size: 24px;
	font-weight: 600;
	color: var(--ink);
}
.content-header.ui-page-header > .ui-page-head-row > h1 > small {
	display: inline;
	padding-left: var(--sp-2);
	font-size: 16px;
	color: var(--muted);
}
.ui-page-actions { display: flex; flex-wrap: wrap; gap: var(--control-gap); }

/* ---------- Buttons ---------- */
.btn-ui {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--control-gap);
	height: var(--h-control);
	padding: 0 var(--sp-4);
	border: 1px solid transparent;
	border-radius: var(--r-control);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	text-decoration: none;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn-ui:hover, .btn-ui:focus { text-decoration: none; }
.btn-ui:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--brand-ring); }
.btn-ui[disabled], .btn-ui.is-busy { opacity: .6; cursor: not-allowed; pointer-events: none; }
.btn-ui .fa { font-size: 13px; }
.btn-ui-primary { background: var(--brand-strong); color: var(--brand-on); }
.btn-ui-primary:hover, .btn-ui-primary:focus { background: var(--brand-strong-hover); color: var(--brand-on-hover); }
.btn-ui-secondary { background: var(--surface); color: var(--ink); border-color: var(--line-input); }
.btn-ui-secondary:hover, .btn-ui-secondary:focus { background: var(--surface-2); color: var(--ink); border-color: var(--line-hover); }
.btn-ui-ghost { background: transparent; color: var(--text-2); }
.btn-ui-ghost:hover, .btn-ui-ghost:focus { background: var(--surface-2); color: var(--ink); }
.btn-ui-danger { background: var(--surface); color: var(--danger); border-color: var(--danger-line); }
.btn-ui-danger:hover, .btn-ui-danger:focus { background: var(--danger-soft); color: var(--danger); }
.btn-ui-danger-solid { background: var(--danger); color: #fff; }
.btn-ui-danger-solid:hover, .btn-ui-danger-solid:focus { background: var(--danger-strong); color: #fff; }
.btn-ui-sm { height: 32px; padding: 0 var(--sp-3); font-size: 13px; }

/* ---------- Badges ---------- */
.ui-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-1);
	padding: var(--sp-nudge) var(--sp-2);
	border-radius: var(--r-pill);
	font-size: 12px;
	font-weight: 600;
	line-height: 18px;
	white-space: nowrap;
}
.ui-badge-ok { background: var(--ok-soft); color: var(--ok); }
.ui-badge-muted { background: var(--surface-3); color: var(--text-2); }
.ui-badge-warn { background: var(--warn-soft); color: var(--warn); }
.ui-badge-danger { background: var(--danger-soft); color: var(--danger); }
.ui-badge-info { background: var(--info-soft); color: var(--info); }

/* ---------- Toolbar pieces ---------- */
.ui-toolbar-end { margin-left: auto; display: flex; flex-wrap: wrap; gap: var(--control-gap); }
.ui-selection-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-3);
	margin: 0 0 var(--sp-3);
	padding: var(--sp-2) var(--sp-3);
	border-radius: var(--r-control);
	background: var(--brand-soft);
	color: var(--ink);
	font-weight: 600;
}
.ui-selection-bar .btn-ui { height: 32px; }
.ui-selection-bar[hidden] { display: none; }

/* Date range: one bordered control; the inputs inside carry no border of their own. */
.ui-range {
	display: inline-flex;
	align-items: center;
	height: var(--h-control);
	border: 1px solid var(--line-input);
	border-radius: var(--r-control);
	background: var(--surface);
}
.ui-range:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
.ui-range input,
.list-page .list-search .ui-range input[type="text"] {
	width: 104px;
	height: 100%;
	padding: 0 var(--sp-2);
	border: 0;
	border-radius: var(--r-control);
	background: transparent;
	box-shadow: none;
	font-variant-numeric: tabular-nums;
}
.ui-range input:focus,
.list-page .list-search .ui-range input[type="text"]:focus { box-shadow: none; outline: 0; background: transparent; }
.ui-range span { padding: 0 var(--sp-nudge); color: var(--muted); }

.ui-list-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	padding: var(--block-gap) 0 0;
	color: var(--text-2);
	font-size: 13px;
}

/* ---------- Pagination (paginacion.jsp) ---------- */
.ui-pagination { margin: 0; display: inline-flex; flex-wrap: wrap; gap: var(--sp-1); }
.pagination.ui-pagination > li > a,
.pagination.ui-pagination > li > span {
	float: none;
	margin: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	padding: 0 var(--sp-2);
	border: 1px solid var(--line-input);
	border-radius: var(--r-control);
	background: var(--surface);
	color: var(--text-2);
	font-size: 13px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.pagination.ui-pagination > li > a:hover,
.pagination.ui-pagination > li > a:focus {
	background: var(--brand-soft);
	border-color: var(--brand);
	color: var(--brand-text);
}
.pagination.ui-pagination > li > a:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--brand-ring); }
.pagination.ui-pagination > li.active > span,
.pagination.ui-pagination > li.active > span:hover {
	background: var(--brand-strong);
	border-color: var(--brand-strong);
	color: var(--brand-on);
}

/* ---------- Form sections ---------- */
.ui-req { color: var(--danger); margin-left: var(--sp-nudge); }
.ui-section { padding: var(--block-gap) 0 var(--sp-1); border-top: 1px solid var(--line); }
.ui-section:first-child,
input[type="hidden"]:first-child + .ui-section { border-top: 0; padding-top: 0; }
.ui-section-title {
	margin: 0 0 var(--block-gap);
	font-size: 16px;
	font-weight: 600;
	color: var(--ink);
}
.ui-section-title small { display: block; margin-top: var(--sp-nudge); font-size: 13px; font-weight: 400; color: var(--muted); }

.ui-check-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--control-gap) var(--sp-4);
	padding-top: var(--sp-2);
}
.ui-check-grid label {
	display: flex;
	align-items: center;
	gap: var(--control-gap);
	margin: 0;
	font-weight: 400;
	color: var(--ink);
	cursor: pointer;
}
.ui-check-grid input { margin: 0; width: 16px; height: 16px; accent-color: var(--brand-strong); }

.ui-switch-row { display: flex; align-items: center; gap: var(--control-gap); padding-top: var(--sp-2); }
.ui-switch-row .ui-switch-label { color: var(--ink); }

/* ---------- Read-only data ---------- */
.ui-dl {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: var(--sp-2) var(--sp-4);
	margin: 0;
	font-size: 13px;
}
.ui-dl dt { color: var(--muted); font-weight: 600; }
.ui-dl dd { margin: 0; color: var(--ink); word-break: break-word; font-variant-numeric: tabular-nums; }
.ui-detail-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--block-gap) var(--sp-8);
	margin-bottom: var(--block-gap);
}
.ui-detail-grid .ui-section-title { padding-bottom: var(--sp-2); border-bottom: 1px solid var(--line); }

/* Sticky at the bottom of the card so Guardar stays reachable on long forms. */
.ui-action-bar {
	position: sticky;
	bottom: 0;
	z-index: 5;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--control-gap);
	margin: 0 calc(-1 * var(--card-pad));
	padding: var(--sp-3) var(--card-pad);
	border-top: 1px solid var(--line);
	border-radius: 0 0 var(--r-card) var(--r-card);
	background: rgba(255, 255, 255, .96);
	box-shadow: 0 -4px 12px -6px rgba(16, 24, 40, .12);
}
.ui-action-bar .ui-spacer { flex: 1 1 auto; }
.ui-action-bar .ui-req-note { color: var(--muted); font-size: 13px; }

/* ---------- Feedback ---------- */
.ui-alert {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-3);
	margin: 0 0 var(--block-gap);
	padding: var(--sp-3) var(--sp-4);
	border-radius: var(--r-card);
	border: 1px solid transparent;
	font-size: 14px;
}
.ui-alert > .fa { margin-top: var(--sp-nudge); }
.ui-alert-body { flex: 1 1 auto; }
.ui-alert .close { opacity: .6; font-size: 20px; line-height: 18px; color: inherit; text-shadow: none; }
.ui-alert .close:hover { opacity: 1; }
.ui-alert-success { background: var(--ok-soft); color: var(--ok); border-color: var(--ok-line); }
.ui-alert-danger { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-line); }
.ui-alert-warning { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-line); }
.ui-alert-info { background: var(--info-soft); color: var(--info); border-color: var(--info-line); }

/* Confirm modal (#atencion-modal): icon beside the title, body aligned with the title. */
.ui-modal { --ui-modal-icon: 40px; }
.ui-modal .ui-modal-dialog { width: auto; max-width: 440px; margin: calc(4 * var(--sp-8)) auto 0; padding: 0 var(--sp-4); }
.ui-modal .modal-content { border: 0; border-radius: 12px; box-shadow: 0 20px 48px rgba(16, 24, 40, .25); }
.ui-modal .modal-header {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	border-bottom: 0;
	padding: var(--card-pad) var(--card-pad) var(--sp-1);
}
.ui-modal .modal-header::before,
.ui-modal .modal-header::after { content: none; }
.ui-modal .modal-title { margin: 0; font-size: 18px; font-weight: 600; color: var(--ink); }
.ui-modal .modal-body {
	padding: var(--sp-1) var(--card-pad) var(--card-pad) calc(var(--card-pad) + var(--ui-modal-icon) + var(--sp-3));
	color: var(--text-2);
}
.ui-modal .modal-footer { border-top: 0; padding: 0 var(--card-pad) var(--card-pad); display: flex; justify-content: flex-end; gap: var(--control-gap); }
.ui-modal .modal-footer::before,
.ui-modal .modal-footer::after { content: none; }
.ui-modal-icon {
	flex: 0 0 var(--ui-modal-icon);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--ui-modal-icon);
	height: var(--ui-modal-icon);
	border-radius: 50%;
	background: var(--brand-soft);
	color: var(--brand-text);
}
.ui-modal.is-danger .ui-modal-icon { background: var(--danger-soft); color: var(--danger); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}
}