/* Sistema de diseño de Intraline (softline-ui.css) portado a DocuWow: mismos tokens --sl-* y clases .sl-* */

/* Base y tokens */

/* 18px como en Intraline (el tema usa 16px): los rem del sistema parten de aquí */
html { font-size: 112.5%; }

:root {
	--sl-blue:        #034D96;
	--sl-blue-600:    #023C77;
	--sl-blue-100:    #E6EEF7;
	--sl-blue-050:    #F3F7FB;

	--sl-pink:        #E33678;
	--sl-pink-600:    #C21F5F;
	--sl-pink-050:    #FDEEF4;

	--sl-danger:      #E3274B;
	--sl-danger-600:  #BA1837;

	--sl-green:       #1F9D55;
	--sl-green-600:   #17773F;
	--sl-amber:       #E2A900;
	--sl-amber-600:   #C79500;
	--sl-red:         #D5384C;

	--sl-bg-page:     #FFFFFF;
	--sl-bg-card:     #FFFFFF;
	--sl-bg-soft:     #FAFBFC;

	--sl-border:      #babcbf;
	--sl-border-2:    #CFD6DE;
	--sl-border-3:    #eaeaea;

	--sl-fg-1:        #034D96;
	--sl-fg-2:        #4A5B6F;
	--sl-fg-3:        #6B7685;
	--sl-grey:        #a2a2a2;

	--sl-shadow-sm:   0 1px 2px rgba(3, 77, 150, .06);
	--sl-shadow-md:   0 4px 14px rgba(3, 77, 150, .08);
	--sl-shadow-card: 0 1px 2px rgba(3, 77, 150, .06), 0 4px 12px rgba(3, 77, 150, .04);

	--sl-focus: 0 0 0 3px rgb(227 54 120 / 35%);

	--sl-radius-xxs:  6px;
	--sl-radius-sm:   8px;
	--sl-radius-md:   8px;
	--sl-radius-lg:   8px;
	--sl-radius-pill: 999px;

	--sl-space-1: .25rem;
	--sl-space-2: .5rem;
	--sl-space-3: .75rem;
	--sl-space-4: 1rem;
	--sl-space-5: 1.5rem;

	--sl-font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	--sl-state-progress: #ffa630;
	--sl-state-neutral:  #a8a8a8;
	--sl-state-done:     #5cb063;
	--sl-state-review:   #FF5C8D;
	--sl-state-urgent:   #FF5566;

	--sl-topbar-alto: 70px;
}

#sl-app {
	font-family: var(--sl-font);
	-webkit-font-smoothing: antialiased;
	color: var(--sl-fg-2);
	background: var(--sl-bg-page);
	/* hereda el radio de main#middle: con esquinas rectas, este fondo tapaba la curva de la tarjeta */
	border-radius: inherit;
	min-height: 100%;
	font-size: .875rem;
	font-weight: 500;
}

/* Tipografía */
.sl-title {
	margin: 0;
	font-size: 1.0625rem; font-weight: 700; color: var(--sl-blue);
	letter-spacing: -0.01em; line-height: 1.2;
}
.sl-title--sm { font-size: .8rem; font-weight: 600; color: var(--sl-blue); }
.sl-eyebrow { font-size: .8125rem; font-weight: 700; color: var(--sl-pink); line-height: 1.2; }
.sl-label {
	margin: 0;
	font-size: .5625rem; font-weight: 800; letter-spacing: .12em;
	text-transform: uppercase; color: var(--sl-fg-3);
}
.sl-text { font-size: .8125rem; font-weight: 400; color: var(--sl-fg-2); line-height: 1.45; }
.sl-text--muted { font-size: .6875rem; font-weight: 500; color: var(--sl-grey); }
.sl-text--pink { color: var(--sl-pink); }

/* Barra de título de la pantalla */
.sl-topbar {
	display: flex; align-items: center; gap: var(--sl-space-2); flex-wrap: wrap;
	padding: 1rem;
	height: var(--sl-topbar-alto);
}

/* Botones */
.sl-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .375rem;
	height: 32px; padding: 0 .75rem;
	font-family: var(--sl-font); font-size: .75rem; font-weight: 500; line-height: 1;
	color: var(--sl-fg-2);
	background: #fff; border: 1px solid var(--sl-border);
	border-radius: var(--sl-radius-sm);
	cursor: pointer; white-space: nowrap; text-decoration: none;
	transition: background .15s, color .15s, border-color .15s, box-shadow .15s, transform .1s;
}
.sl-btn:hover { transform: translateY(-1px); text-decoration: none; }
.sl-btn:focus { outline: none; box-shadow: var(--sl-focus); }
.sl-btn:active { transform: translateY(0); }
.sl-btn[disabled], .sl-btn.is-disabled { opacity: .5; cursor: not-allowed; transform: none; }

.sl-btn--primary { background: var(--sl-blue); border-color: var(--sl-blue); color: #fff; }
.sl-btn--primary:hover, .sl-btn--primary:focus { background-color: var(--sl-blue-600); border-color: var(--sl-blue-600); color: #fff; }

.sl-btn--pink { background: var(--sl-pink); border-color: var(--sl-pink); color: #fff; }
.sl-btn--pink:hover, .sl-btn--pink:focus { background: var(--sl-pink-600); border-color: var(--sl-pink-600); color: #fff; }

.sl-btn--ghost { background: transparent; color: var(--sl-fg-2); }
.sl-btn--ghost:hover, .sl-btn--ghost:focus { background: var(--sl-blue); border-color: var(--sl-blue); color: #fff; }

.sl-btn--danger { background: var(--sl-danger); border-color: var(--sl-danger); color: #fff; }
.sl-btn--danger:hover, .sl-btn--danger:focus { background-color: var(--sl-danger-600); border-color: var(--sl-danger-600); color: #fff; }

/* el ámbar lleva texto oscuro: blanco sobre #E2A900 no se lee */
.sl-btn--ok { background: var(--sl-green); border-color: var(--sl-green); color: #fff; }
.sl-btn--ok:hover, .sl-btn--ok:focus { background-color: var(--sl-green-600); border-color: var(--sl-green-600); color: #fff; }
.sl-btn--warn { background: var(--sl-amber); border-color: var(--sl-amber); color: var(--sl-blue-600); }
.sl-btn--warn:hover, .sl-btn--warn:focus { background-color: var(--sl-amber-600); border-color: var(--sl-amber-600); color: var(--sl-blue-600); }

.sl-btn--pill { border-radius: var(--sl-radius-pill); }
.sl-btn--block { display: flex; width: 100%; }
.sl-btn--xs { height: 24px; padding: .3rem; }
.sl-btn--icon { width: 32px; min-width: 32px; max-width: 32px; padding: 0; }
.sl-btn--icon.sl-btn--xs { width: 24px; min-width: 24px; max-width: 24px; }
.sl-btn--icon i { line-height: 0; }

/* Píldoras, badges y etiquetas */
.sl-pill {
	display: inline-flex; align-items: center;
	font-size: .625rem; font-weight: 400; letter-spacing: .06em; text-transform: uppercase;
	color: #fff; border: 1px solid transparent; border-radius: var(--sl-radius-pill);
	padding: .4375rem .375rem; line-height: 1; white-space: nowrap;
}
/* color con --sl-pill-color (azul por defecto); relleno al 12 % */
.sl-pill--status {
	--_pill: var(--sl-pill-color, var(--sl-blue));
	color: var(--_pill); border-color: var(--_pill);
	background: #f3f3f3; /* respaldo sin color-mix() */
	background: color-mix(in srgb, var(--_pill) 12%, #fff);
}

.sl-tag {
	display: inline-flex; align-items: center; gap: .25rem;
	font-size: .5625rem; font-weight: 700; color: var(--sl-blue); background: var(--sl-blue-100);
	border-radius: var(--sl-radius-pill); padding: .1875rem .5rem;
	white-space: nowrap; max-width: 8.75rem; overflow: hidden; text-overflow: ellipsis;
}

.sl-badge-count {
	display: inline-flex; align-items: center; justify-content: center;
	width: 17px; height: 17px; padding: 0;
	border-radius: 50%;
	background: var(--sl-pink); color: #fff;
	font-size: 9px; font-weight: 700; line-height: 1;
	border: 2px solid #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
	vertical-align: middle;
}
.sl-badge-count--wide { width: auto; min-width: 17px; padding: 0 3px; border-radius: 999px; }

.sl-check {
	display: inline-flex; align-items: center; gap: .3rem;
	font-size: .6875rem; font-weight: 600; line-height: 1;
	padding: .3rem .6rem; border-radius: var(--sl-radius-pill);
	border: 1px solid var(--sl-border); background: #fff; color: var(--sl-fg-3);
	white-space: nowrap;
}
.sl-check::before { font-weight: 800; }
.sl-check--yes { background: var(--sl-blue-050); border-color: var(--sl-blue-100); color: var(--sl-blue); }
.sl-check--yes::before { content: "✓"; }
.sl-check--no::before { content: "–"; color: var(--sl-fg-3); }
.sl-check--warn { background: var(--sl-pink-050); border-color: var(--sl-state-urgent); color: var(--sl-state-urgent); }
.sl-check--warn::before { content: "!"; }

/* Tarjetas y panel */
.sl-card {
	position: relative;
	background: var(--sl-bg-card);
	border: 1px solid var(--sl-border);
	border-radius: var(--sl-radius-lg);
	margin-bottom: .4375rem;
}
.sl-card__body { padding: .75rem; }
.sl-card--accent { border-top: 2px solid var(--sl-card-accent, var(--sl-blue)); }

.sl-page-header {
	display: flex; align-items: center; gap: .625rem;
	margin: 0 0 1rem; padding: 0 0 .625rem;
	font-size: 1.125rem; font-weight: 700; color: var(--sl-blue); line-height: 1.2;
}
.sl-page-header > i:first-child {
	display: inline-flex; align-items: center; justify-content: center;
	width: 1.875rem; height: 1.875rem; flex-shrink: 0;
	font-size: .875rem; color: var(--sl-blue);
	background: var(--sl-blue-100); border-radius: var(--sl-radius-md);
}

.sl-panel {
	background: var(--sl-bg-card); border: 1px solid var(--sl-border);
	border-radius: var(--sl-radius-md); box-shadow: var(--sl-shadow-sm);
	margin-bottom: 1rem; overflow: hidden;
}
.sl-panel__header {
	padding: var(--sl-space-2);
	background: var(--sl-blue-050);
	font-size: .8125rem; font-weight: 600; color: var(--sl-blue); letter-spacing: .02em;
}
.sl-panel__body { padding: var(--sl-space-3); }

/* Tabla */
.sl-table-bordered {
	border: 1px solid var(--sl-border);
	border-radius: var(--sl-radius-md);
	overflow: hidden;
}
.sl-table-bordered > .table {
	--bs-table-bg: transparent;
	--bs-table-color: var(--sl-fg-2);
	--bs-table-border-color: var(--sl-border-3);
	margin-bottom: 0;
	vertical-align: middle;
}
.sl-table-bordered > .table > thead > tr > th {
	padding: 15px;
	background: transparent;
	border-bottom: 1px solid var(--sl-border);
	color: var(--sl-blue);
	font-size: .8125rem; font-weight: 700;
	vertical-align: middle;
}
.sl-table-bordered > .table > tbody > tr > td {
	padding: .5rem 15px;
	border-bottom-color: var(--sl-border-3);
	vertical-align: middle;
}
.sl-table-bordered > .table > tbody > tr:nth-child(odd) > td { background-color: var(--sl-bg-page); }
.sl-table-bordered > .table > tbody > tr:nth-child(even) > td { background-color: var(--sl-blue-100); }
.sl-table-bordered > .table > tbody > tr:last-child > td { border-bottom: 0; }
.sl-table-bordered > .table a { color: var(--sl-blue); }
.sl-table-bordered > .table a:hover { color: var(--sl-pink); }

.sl-table {
	width: 100%; border-collapse: separate; border-spacing: 0; font-size: .75rem;
	border: 1px solid var(--sl-border); border-radius: var(--sl-radius-md); overflow: hidden;
}
.sl-table thead th {
	padding: .625rem; text-align: left;
	background: var(--sl-bg-soft);
	border-bottom: 1px solid var(--sl-border);
	color: var(--sl-blue); font-size: .8125rem; font-weight: 700;
}
.sl-table tbody td { padding: .5rem .625rem; border-bottom: 1px solid var(--sl-border); color: var(--sl-fg-2); vertical-align: middle; }
.sl-table tbody tr:last-child td { border-bottom: none; }
.sl-table tbody tr:hover td { background: var(--sl-blue-050); }

.sl-count { font-size: .75rem; font-weight: 500; color: var(--sl-fg-3); }
.sl-count strong { color: var(--sl-blue); font-weight: 700; }

/* Formularios */
.sl-form-group { margin-bottom: .625rem; }
.sl-form-label {
	display: block;
	margin: 0 0 .125rem 1px;
	font-size: .6875rem; font-weight: 700; text-transform: uppercase;
	color: #868181;
}
.sl-form-hint { margin: .125rem 0 0 1px; font-size: .6875rem; font-weight: 500; color: var(--sl-fg-3); }

.sl-input, .sl-select,
#sl-app .form-control, #sl-app .form-select,
.modal-body .form-control, .modal-body .form-select {
	height: 1.75rem; padding: 0 .5rem;
	font-family: var(--sl-font); font-size: .75rem; color: var(--sl-fg-2);
	background-color: #fff; border: 1px solid var(--sl-border); border-radius: var(--sl-radius-sm);
	box-shadow: none;
	transition: border-color .15s, box-shadow .15s;
}
.sl-input:focus, .sl-select:focus,
#sl-app .form-control:focus, #sl-app .form-select:focus,
.modal-body .form-control:focus, .modal-body .form-select:focus {
	outline: none; border-color: var(--sl-blue); box-shadow: var(--sl-focus);
}
textarea.sl-input, #sl-app textarea.form-control, .modal-body textarea.form-control { height: auto; padding: .25rem .5rem; }
#sl-app input[type="checkbox"], .modal-body input[type="checkbox"] { accent-color: var(--sl-blue); }
.sl-input::placeholder, .modal-body .form-control::placeholder { color: var(--sl-fg-3); font-weight: 400; }
.modal-body .form-control:disabled, .modal-body .form-select:disabled { background-color: var(--sl-bg-soft); }

.sl-switch {
	display: inline-flex; align-items: center; gap: .5rem;
	font-size: .8125rem; font-weight: 500; color: var(--sl-fg-2);
	cursor: pointer; user-select: none;
}
.sl-switch input[type="checkbox"] { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.sl-switch__track {
	position: relative; flex: 0 0 auto;
	width: 2.25rem; height: 1.25rem;
	background: var(--sl-border-2); border-radius: var(--sl-radius-pill);
	transition: background .15s;
}
.sl-switch__track::before {
	content: ""; position: absolute; top: .125rem; left: .125rem;
	width: 1rem; height: 1rem; border-radius: 50%;
	background: #fff; box-shadow: var(--sl-shadow-sm);
	transition: transform .15s;
}
.sl-switch input:checked ~ .sl-switch__track { background: var(--sl-blue); }
.sl-switch input:checked ~ .sl-switch__track::before { transform: translateX(1rem); }
.sl-switch input:focus-visible ~ .sl-switch__track { box-shadow: var(--sl-focus); }
.sl-switch input:disabled ~ .sl-switch__track { opacity: .5; }
.sl-switch:has(input:disabled) { cursor: not-allowed; }

/* Diálogos (las modales cuelgan del <body>, fuera de #sl-app) */
.bootstrap-dialog .modal-content,
.modal-dialog .modal-content {
	font-family: var(--sl-font);
	border: 1px solid var(--sl-border);
	border-radius: var(--sl-radius-lg);
	box-shadow: var(--sl-shadow-md);
	overflow: hidden;
}

.bootstrap-dialog .modal-header,
.modal-dialog .modal-header,
div.bootstrap-dialog.type-primary .modal-header {
	background: var(--sl-blue) !important;
	border: 0;
	/* sin radio propio: lo recorta .modal-content; el tema pone 16px con !important */
	border-radius: 0 !important;
	text-shadow: none;
	padding: .625rem 1rem;
}
.bootstrap-dialog .bootstrap-dialog-title,
.modal-dialog .modal-header .bootstrap-dialog-title {
	font-family: var(--sl-font);
	font-size: .9375rem; font-weight: 700;
	color: #fff;
}
/* la × negra del tema se sustituye por texto para poder teñirla */
.bootstrap-dialog-close-button .btn-close,
.modal-header .btn-close {
	position: relative;
	width: auto; height: auto; padding: 0;
	background: none; opacity: 1; filter: none;
	color: var(--sl-pink);
	font-size: 1.625rem; line-height: 1;
	transition: color .15s, transform .1s;
}
.bootstrap-dialog-close-button .btn-close::before,
.modal-header .btn-close::before { content: "\00d7"; }
.bootstrap-dialog-close-button .btn-close:hover,
.bootstrap-dialog-close-button .btn-close:focus,
.modal-header .btn-close:hover,
.modal-header .btn-close:focus { color: #FF7AAA; transform: scale(1.1); box-shadow: none; }

.bootstrap-dialog .modal-body,
.modal-dialog .modal-body {
	font-family: var(--sl-font);
	color: var(--sl-fg-2);
	background: #fff;
}

.bootstrap-dialog .modal-footer,
.modal-dialog .modal-footer {
	background: var(--sl-bg-soft);
	border: 0;
	border-top: 1px solid var(--sl-border);
	border-radius: 0;
	box-shadow: none;
	padding: .625rem 1rem;
}
.bootstrap-dialog .modal-footer .btn,
.modal-dialog .modal-footer .btn {
	border-radius: var(--sl-radius-sm);
	font-size: .75rem; font-weight: 600;
	box-shadow: none; background-image: none;
	transition: background .15s, color .15s, border-color .15s, transform .1s;
}
.bootstrap-dialog .modal-footer .btn:hover,
.modal-dialog .modal-footer .btn:hover { transform: translateY(-1px); }
.bootstrap-dialog .modal-footer .btn:focus,
.modal-dialog .modal-footer .btn:focus { box-shadow: var(--sl-focus); outline: none; }
.bootstrap-dialog .modal-footer .btn-primary,
.modal-dialog .modal-footer .btn-primary { background: var(--sl-blue); border-color: var(--sl-blue); color: #fff; }
.bootstrap-dialog .modal-footer .btn-primary:hover,
.bootstrap-dialog .modal-footer .btn-primary:focus,
.modal-dialog .modal-footer .btn-primary:hover,
.modal-dialog .modal-footer .btn-primary:focus { background: var(--sl-blue-600); border-color: var(--sl-blue-600); color: #fff; }
.bootstrap-dialog .modal-footer .btn-default,
.bootstrap-dialog .modal-footer .btn-secondary,
.modal-dialog .modal-footer .btn-default,
.modal-dialog .modal-footer .btn-secondary { background: #fff; border-color: var(--sl-border); color: var(--sl-fg-2); }
.bootstrap-dialog .modal-footer .btn-default:hover,
.bootstrap-dialog .modal-footer .btn-default:focus,
.bootstrap-dialog .modal-footer .btn-secondary:hover,
.bootstrap-dialog .modal-footer .btn-secondary:focus,
.modal-dialog .modal-footer .btn-default:hover,
.modal-dialog .modal-footer .btn-default:focus,
.modal-dialog .modal-footer .btn-secondary:hover,
.modal-dialog .modal-footer .btn-secondary:focus { background: var(--sl-blue-050); border-color: var(--sl-border-2); color: var(--sl-blue); }

.sl-key {
	padding: .125rem .4rem;
	background: var(--sl-blue-050);
	border: 1px solid var(--sl-border-3);
	border-radius: var(--sl-radius-xxs);
	color: var(--sl-fg-2);
	font-size: .75rem;
	word-break: break-all;
}
.sl-secret-row { display: flex; align-items: center; gap: .5rem; }
.sl-secret {
	flex: 1 1 auto;
	min-width: 0;
	padding: .5rem .75rem;
	background: var(--sl-blue-050);
	border: 1px solid var(--sl-border);
	border-radius: var(--sl-radius-sm);
	color: var(--sl-blue-600);
	font-size: .8125rem;
	word-break: break-all;
	user-select: all;
}

/* Utilidades */
.sl-margin-lr-15 { margin: 15px; }
.sl-col-fit { width: 1%; white-space: nowrap; }
.sl-cell-row { display: flex; align-items: center; gap: .25rem; }