/* General */
:root {
	--border-radius: 4px;
	--border-radius2x: 8px;
	--default: #777;
}
/* Skin Colors */
:root {
	--primary: #f6b72e;
	--secondary: #fac34b;
	--negro: #4b4b4b;
	--gris: #eeeeee;
	--azul: #5f98da;
	--verde: #30a258;
	--c4y-gold: #f7ba2a;
	--c4y-gold-bg: #fff8e6;
	--c4y-gold-border: #f7d980;
	--c4y-gold-text: #92620a;
}
.error {
	color: red;
	font-weight: 600;
}
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--primary) !important;
	text-transform: uppercase !important;
}
.btn-primary-c4y {
	background-color: var(--primary) !important;
	color: #fff;
	font-weight: 600;
}
.btn-check:active + .btn.btn-primary-c4y,
.btn-check:checked + .btn.btn-primary-c4y,
.btn.btn-primary-c4y.active,
.btn.btn-primary-c4y.show,
.btn.btn-primary-c4y:active:not(.btn-active),
.btn.btn-primary-c4y:focus:not(.btn-active),
.btn.btn-primary-c4y:hover:not(.btn-active),
.show > .btn.btn-primary-c4y {
	background-color: var(--secondary) !important;
	color: var(--negro);
}
.btn-primary-c4y:hover i.text-light {
	color: var(--negro) !important;
}
.color_primario {
	color: var(--primary) !important;
}
.color_primario:hover {
	color: var(--secondary) !important;
}
.menu-icon-gray-500 .menu-item .menu-link .menu-icon,
.menu-icon-gray-500 .menu-item .menu-link .menu-icon .svg-icon,
.menu-icon-gray-500 .menu-item .menu-link .menu-icon i {
	color: var(--primary) !important;
}
.menu-title-gray-700 .menu-item .menu-link {
	color: var(--primary) !important;
}
.app-content {
	margin-top: 0px;
	background-color: #f4f6fa;
}

.icono-chats {
	font-size: 3rem !important;
	color: var(--primary);
}

#formEncuesta .form-label {
	font-weight: 500 !important;
	color: var(--primary);
}

#formEncuesta .form-select,
#formEncuesta .form-control {
	border-radius: 0.5rem;
	color: var(--negro);
}

.text-color {
	color: var(--negro);
}

#div_encuestas strong {
	color: var(--primary);
}
#div_encuestas p {
	color: var(--negro);
}
.form-check label {
	color: var(--negro);
}

.chats {
	cursor: pointer;
}
.chats:hover a,
.chats:hover span {
	color: var(--primary) !important;
}

.h-50vh {
	height: 50vh !important;
}

.bg-primary {
	background-color: var(--primary) !important;
}

.text-primary-c4y {
	color: var(--primary) !important;
}

.text-gray {
	color: #414141 !important;
}

.swal2-loader {
	border-color: var(--primary) transparent var(--primary) transparent;
}

.menu-state-primary .menu-item.hover:not(.here) > .menu-link:not(.disabled):not(.active):not(.here) .menu-bullet .bullet,
.menu-state-primary .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-bullet .bullet {
	background-color: var(--primary) !important;
}

.menu-state-primary .menu-item.hover:not(.here) > .menu-link:not(.disabled):not(.active):not(.here) .menu-title,
.menu-state-primary .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-title {
	color: var(--primary) !important;
}

.menu-state-color .menu-item.hover:not(.here) > .menu-link:not(.disabled):not(.active):not(.here),
.menu-state-color .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) {
	color: var(--primary) !important;
}

.dropdown.show > .form-control.form-control-solid,
.form-control.form-control-solid.active,
.form-control.form-control-solid,
.form-control.form-control-solid:active,
.form-control.form-control-solid {
	background-color: #f1f1f4 !important;
}

.select2-container .select2-selection--single {
	height: auto !important;
}

/* 🔧 Corrige el scroll horizontal de la tabla de conceptos */
#tablaConceptos {
	width: 100% !important;
	min-width: auto !important;
	table-layout: fixed;
}

#tablaConceptos th,
#tablaConceptos td {
	white-space: normal !important;
	word-wrap: break-word;
}

.table-responsive {
	overflow-x: hidden !important;
}

#tablaConceptos th:nth-child(2) {
	width: 30%;
}
#tablaConceptos th:nth-child(3) {
	width: 40%;
}
#tablaConceptos th:nth-child(4) {
	width: 15%;
}
#facturaCampos {
	transition: all 0.3s ease-in-out;
}

#cardStickyPago[data-kt-sticky="true"] {
	max-width: 300px !important;
	width: 100%;
}

.alert-primary {
	color: var(--negro);
	border-color: var(--negro);
	background-color: var(--gris);
}

.alert-primary i {
	color: var(--primary);
}
.alert-primary h4 {
	color: var(--primary);
}
.color_negro {
	color: var(--negro) !important;
}
.bg-success {
	background-color: var(--verde) !important;
}

.bg-light-secondary {
	background-color: #8c8c8c !important;
	color: #fff !important;
}

.btn.btn-primary {
	background-color: var(--azul) !important;
	border-color: var(--azul) !important;
}

.swal2-title {
	color: var(--negro) !important;
	font-weight: 700 !important;
}

.badge-light-success {
	color: var(--verde);
}

.swal2-popup.swal2-toast .swal2-success {
	border-color: var(--verde) !important;
	color: var(--verde) !important;
}
.swal2-icon.swal2-success [class^="swal2-success-line"] {
	color: var(--verde) !important;
}
.swal2-icon.swal2-success .swal2-success-ring {
	border-color: var(--verde) !important;
}
.badge-light-success {
	color: #fff;
}
.badge-light-success {
	background-color: var(--verde);
}
.text-success {
	color: var(--verde) !important;
}

.bg-light-primary {
	background-color: var(--gris) !important;
}

.form-check-input:checked {
	background-color: var(--primary);
	border-color: var(--primary);
}

.btn.disabled,
.btn:disabled,
fieldset:disabled .btn {
	color: #fff;
}

.form-control:focus {
	color: var(--negro);
}

/* === CODE4YOU STYLING BOOST === */
.bg-gradient-to-r {
	background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
}

.hover-elevate-up:hover {
	transform: translateY(-2px);
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
	transition: all 0.2s ease;
}

.hover-scale:hover {
	transform: scale(1.02);
	transition: all 0.2s ease;
}

/* Input QR focus */
#codigo_qr:focus {
	border-color: var(--primary);
	box-shadow: 0 0 0 0.25rem rgba(247, 185, 44, 0.25);
}

/* Alertas de acceso (puedes activarlas dinámicamente en JS) */
#alertaAcceso.success {
	color: #10b981;
	text-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
}
#alertaAcceso.error {
	color: #ef4444;
	text-shadow: 0 0 10px rgba(239, 68, 68, 0.3);
}

/* Animaciones suaves para los resultados */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Tarjeta base */
#resultadoAcceso .card {
	transition: all 0.3s ease;
	animation: fadeInUp 0.3s ease forwards;
	border-left: 5px solid transparent;
}

/* Estados */
#resultadoAcceso.success .card {
	border-left-color: var(--gris); /* Verde */
}
#resultadoAcceso.error .card {
	border-left-color: #ef4444; /* Rojo */
	background: linear-gradient(90deg, rgba(239, 68, 68, 0.05), transparent);
}
#resultadoAcceso.info .card {
	border-left-color: var(--secondary);
	background: linear-gradient(90deg, rgba(247, 185, 44, 0.08), transparent);
}

/* Iconos */
#resultadoAcceso i {
	font-size: 3rem;
}

.bg-gris {
	background-color: var(--gris) !important;
}

.border-primary {
	border-color: var(--primary) !important;
}

.select2-container--bootstrap5 .select2-dropdown .select2-results__option.select2-results__option--selected {
	color: var(--primary) !important;
}

.select2-container--bootstrap5 .select2-dropdown .select2-results__option {
	color: var(--negro) !important;
}

.swal-c4y {
	border: 2px solid var(--primary);
	border-radius: 12px !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
	font-family: "Inter", sans-serif;
}
.swal2-title {
	font-size: 1rem !important;
	text-transform: none !important;
}
.swal2-toast {
	min-width: 280px !important;
}
.active > .page-link,
.page-link.active {
	background-color: var(--primary) !important;
}
#graficaCategorias,
#graficaDiaria,
#graficaRifaCategoria {
	height: 250px !important;
	max-height: 250px;
	width: 100%;
}
/* Menu link estilo "Language": alineación y aire */
.c4y-menu-link-stack {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 0.75rem !important;
}

/* El valor (evento activo) no debe romper el layout */
.c4y-menu-desc-truncate {
	max-width: 150px; /* ajusta si quieres más/menos */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: right;
}

/* Evita que el submenú se vea pegado al menú padre */
.menu-sub-dropdown[data-kt-menu="true"] {
	border-radius: 12px;
}

.menu-state-color .menu-item .menu-link.active {
	color: var(--primary) !important;
}

.menu-state-color .menu-item .menu-link.active .menu-title {
	color: var(--primary) !important;
}
.menu-state-color .menu-item.hover:not(.here) > .menu-link:not(.disabled):not(.active):not(.here) .menu-title,
.menu-state-color .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-title {
	color: var(--primary) !important;
}

.menu-state-color .menu-item.hover:not(.here) > .menu-link:not(.disabled):not(.active):not(.here),
.menu-state-color .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) {
	color: var(--primary) !important;
}

.menu-state-color .menu-item.show > .menu-link .menu-title {
	color: var(--primary) !important;
}
.menu-state-color .menu-item.hover:not(.here) > .menu-link:not(.disabled):not(.active):not(.here) .menu-arrow:after,
.menu-state-color .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-arrow:after {
	background-color: var(--primary) !important;
}

.border-hover-primary:hover {
	border-color: var(--primary) !important;
}
.menu-state-color .menu-item.show > .menu-link .menu-arrow:after {
	background-color: var(--primary) !important;
}
.page-link:focus,
.page-link:hover {
	color: var(--primary) !important;
}
.btn.btn-secondary {
	color: #fff !important;
}

.btn.btn-secondary:hover {
	color: var(--negro) !important;
}
.scrolltop {
	background-color: var(--primary) !important;
}

.c4y-cell {
	line-height: 1.1;
}
.c4y-title {
	font-weight: 700;
	color: #1f2937;
}
.c4y-sub {
	font-size: 0.85rem;
	color: #6b7280;
	margin-top: 0.2rem;
}

.c4y-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.c4y-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	display: inline-block;
}
.c4y-dot-INSCRIPCION {
	background: #3b82f6;
}
.c4y-dot-TALLER {
	background: #f59e0b;
}
.c4y-dot-MEMBRESIA {
	background: #8b5cf6;
}
.c4y-dot-EXTRA {
	background: #10b981;
}
.c4y-dot-GENERAL {
	background: #9ca3af;
}

.c4y-icons {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
}
.c4y-ico {
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
}
.c4y-ico.on {
	background: rgba(17, 24, 39, 0.06);
}
.c4y-ico.on i {
	color: #111827;
}
.c4y-ico.off {
	background: rgba(107, 114, 128, 0.04);
}
.c4y-ico.off i {
	color: #9ca3af;
}

.c4y-price .c4y-title {
	font-weight: 800;
}
.c4y-price .c4y-sub {
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.btn-check:active + .btn.btn-active-color-primary .svg-icon,
.btn-check:active + .btn.btn-active-color-primary i,
.btn-check:checked + .btn.btn-active-color-primary .svg-icon,
.btn-check:checked + .btn.btn-active-color-primary i,
.btn.btn-active-color-primary.active .svg-icon,
.btn.btn-active-color-primary.active i,
.btn.btn-active-color-primary.show .svg-icon,
.btn.btn-active-color-primary.show i,
.btn.btn-active-color-primary:active:not(.btn-active) .svg-icon,
.btn.btn-active-color-primary:active:not(.btn-active) i,
.btn.btn-active-color-primary:focus:not(.btn-active) .svg-icon,
.btn.btn-active-color-primary:focus:not(.btn-active) i,
.btn.btn-active-color-primary:hover:not(.btn-active) .svg-icon,
.btn.btn-active-color-primary:hover:not(.btn-active) i,
.show > .btn.btn-active-color-primary .svg-icon,
.show > .btn.btn-active-color-primary i {
	color: var(--primary) !important;
}
.swal2-icon.swal2-question {
	border-color: #f6b72e;
	color: #f6b72e;
}

#cardStickyPago {
	position: sticky;
	top: 100px;
	z-index: 10;
}

#carritoItems {
	max-height: calc(100vh - 420px);
	overflow: auto;
	padding-right: 4px;
}
#carritoItems::-webkit-scrollbar {
	width: 6px;
}
#carritoItems::-webkit-scrollbar-thumb {
	background: rgba(100, 116, 139, 0.35);
	border-radius: 20px;
}

.badge-success {
	background-color: var(--verde);
}

.nav.nav-pills.nav-pills-custom .nav-link,
.nav.nav-pills.nav-pills-custom .show > .nav-link {
	border: 1px solid var(--primary);
	border-radius: 1.25rem;
	color: #000;
}

.nav.nav-pills.nav-pills-custom .nav-link.active,
.nav.nav-pills.nav-pills-custom .show > .nav-link.active {
	background-color: var(--primary);
	font-weight: 600;
	color: #fff;
	border: 1px solid #fff;
}
.nav-pills .nav-item {
	cursor: pointer;
}

/* ── "Powered by" ── */
.c4y-powered-txt {
	font-size: 10px;
	color: var(--bs-gray-400);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-align: center;
	margin-bottom: 5px;
}

.c4y-brand-badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 20px;
	border-radius: 50px;
	text-decoration: none;
	transition:
		border-color 0.2s,
		background 0.2s,
		transform 0.15s,
		box-shadow 0.2s;
}

.c4y-brand-badge:hover {
	border-color: var(--bs-gray-300);
	background: #fff;
	transform: translateY(-1px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

/* ── KPI cards ── */
.c4y-kpi {
	border-radius: 14px;
	border: 1px solid var(--bs-gray-200);
	overflow: hidden;
	transition:
		box-shadow 0.2s,
		transform 0.15s;
}
.c4y-kpi:hover {
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.09);
	transform: translateY(-1px);
}
.c4y-kpi-stripe {
	height: 4px;
}
.c4y-kpi-body {
	padding: 1.1rem 1.2rem;
}
.c4y-kpi-label {
	font-size: 0.72rem;
	color: var(--bs-gray-500);
	text-transform: uppercase;
	letter-spacing: 0.07em;
	margin-bottom: 0.5rem;
}
.c4y-kpi-val {
	font-size: 2rem;
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 1;
	color: var(--bs-gray-900);
}
.c4y-kpi-tag {
	display: inline-block;
	font-size: 0.68rem;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 20px;
	margin-top: 0.5rem;
}

/* ── Número grande "en recinto" ── */
.c4y-big-num {
	font-size: 4rem;
	font-weight: 700;
	letter-spacing: -0.06em;
	line-height: 1;
	color: #1a6ead;
}

/* ── Barras de progreso ── */
.c4y-prog-track {
	height: 6px;
	background: var(--bs-gray-200);
	border-radius: 3px;
	overflow: hidden;
}
.c4y-prog-fill {
	height: 100%;
	border-radius: 3px;
	transition: width 1.2s ease;
}

/* ── Feed accesos ── */
.c4y-acc-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 0.68rem;
	font-weight: 700;
	padding: 2px 7px;
	border-radius: 20px;
}
.c4y-acc-in {
	background: #e9f7ef;
	color: #1e8449;
}
.c4y-acc-out {
	background: #fdf2f8;
	color: #8e44ad;
}
.c4y-acc-avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.68rem;
	font-weight: 600;
	flex-shrink: 0;
}

/* ── Acceso rápido ── */
.c4y-qlink {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 1rem 0.5rem;
	border: 1px solid var(--bs-gray-200);
	border-radius: 12px;
	text-decoration: none;
	transition: all 0.2s;
	cursor: pointer;
	background: #fff;
}
.c4y-qlink:hover {
	border-color: var(--color-primario, #1a6ead);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}
.c4y-qlink-ico {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1rem;
}

/* ── Skeleton ── */
.c4y-sk {
	background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
	background-size: 200%;
	border-radius: 6px;
	animation: c4ySk 1.4s infinite;
}
@keyframes c4ySk {
	from {
		background-position: 200% 0;
	}
	to {
		background-position: -200% 0;
	}
}

/* ── Dot pulsante ── */
.c4y-dot-live {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #27ae60;
	display: inline-block;
	animation: c4yPu 1.7s ease-in-out infinite;
}
@keyframes c4yPu {
	0%,
	100% {
		opacity: 1;
		transform: scale(1);
	}
	50% {
		opacity: 0.4;
		transform: scale(1.4);
	}
}

/* ── Modo finalizado — highlight financiero ── */
.c4y-fin-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.6rem 0.9rem;
	background: var(--bs-gray-100);
	border-radius: 10px;
	margin-bottom: 0.5rem;
}
.c4y-fin-row:last-child {
	margin-bottom: 0;
}

/* ── Badge modo ── */
.c4y-modo-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.72rem;
	font-weight: 600;
	padding: 4px 11px;
	border-radius: 20px;
}
/* ── Fix Select2 modal: solo z-index, el posicionamiento lo hace el JS ── */
.select2-container--open {
	z-index: 99999 !important;
}

.select2-container--open {
	z-index: 9999 !important;
}

.modal .select2-container {
	width: 100% !important;
}

.select2-dropdown {
	z-index: 9999 !important;
}

/* ═══════════════════════════════════════
   MODAL ENVIAR PLANTILLA DESDE CHAT
═══════════════════════════════════════ */

#modal_plantilla_com .modal-dialog {
	max-width: 950px;
}

#modal_plantilla_com .modal-content {
	border: 0;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 24px 80px rgba(15, 23, 42, 0.22);
}

#modal_plantilla_com .modal-header {
	min-height: 74px;
	padding: 18px 24px;
	border-bottom: 1px solid #eef0f4;
	background: #fff;
}

#modal_plantilla_com .modal-title {
	font-weight: 800;
	color: #111827;
	text-transform: uppercase;
}

#modal_plantilla_com .modal-body {
	max-height: calc(100dvh - 150px);
	overflow: hidden;
}

.comtpl-send-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	height: calc(100dvh - 150px);
	min-height: 560px;
}

.comtpl-send-form {
	padding: 24px;
	overflow-y: auto;
	min-height: 0;
	background: #fff;
}

.comtpl-send-preview {
	background: #f8f9fb;
	border-left: 1px solid #eef0f4;
	padding: 22px;
	overflow-y: auto;
	min-height: 0;
}

.comtpl-send-preview .plt-preview-card {
	position: sticky;
	top: 0;
	background: #fff;
	border: 1px solid #eef0f4;
	border-radius: 16px;
	padding: 16px;
	box-shadow: 0 6px 22px rgba(15, 23, 42, 0.05);
}

.comtpl-var-card {
	background: #fff;
	border: 1px solid #eef0f4;
	border-radius: 14px;
	padding: 12px;
	margin-bottom: 10px;
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
}

.comtpl-var-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 8px;
}

.comtpl-var-title {
	font-size: 10px;
	font-weight: 800;
	color: #98a2b3;
	letter-spacing: 0.05em;
}

.comtpl-var-input:focus {
	border-color: var(--c4y-gold) !important;
	box-shadow: 0 0 0 3px rgba(247, 186, 42, 0.12) !important;
}

#comtpl_header_file_wrap {
	background: #f8f9fb;
	border: 1px solid #eef0f4;
	border-radius: 14px;
	padding: 14px;
}

#modal_plantilla_com .modal-footer {
	position: sticky;
	bottom: 0;
	z-index: 5;
	background: #fff;
	border-top: 1px solid #eef0f4;
	padding: 14px 24px;
}

#btn_confirmar_plantilla_com {
	background: var(--c4y-gold);
	border-color: var(--c4y-gold);
	color: #171717;
}

#btn_confirmar_plantilla_com:hover {
	background: #e5a820;
	border-color: #e5a820;
	color: #171717;
}

/* Reutiliza apariencia WhatsApp */
#modal_plantilla_com .plt-prueba-phone {
	background: #e5ddd5;
	border-radius: 12px;
	padding: 12px;
}

#modal_plantilla_com .plt-prueba-bubble {
	background: #fff;
	border-radius: 0 8px 8px 8px;
	padding: 10px 12px 6px;
	position: relative;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
	font-size: 13px;
	line-height: 1.5;
	color: #111b21;
	word-break: break-word;
}

#modal_plantilla_com .plt-prueba-bubble::before {
	content: "";
	position: absolute;
	top: 0;
	left: -6px;
	border-width: 0 6px 6px 0;
	border-style: solid;
	border-color: transparent #fff transparent transparent;
}

#modal_plantilla_com .plt-prueba-time {
	text-align: right;
	font-size: 10px;
	color: #aebac1;
	margin-top: 4px;
}

#modal_plantilla_com .wa-hdr {
	font-weight: 700;
	margin-bottom: 6px;
	padding-bottom: 6px;
	border-bottom: 1px solid #f0f2f5;
}

#modal_plantilla_com .wa-ftr {
	font-size: 11px;
	color: #667781;
	margin-top: 6px;
	padding-top: 6px;
	border-top: 1px solid #f0f2f5;
}

#modal_plantilla_com .wa-btn-item {
	background: #fff;
	border-radius: 7px;
	padding: 8px 10px;
	text-align: center;
	font-size: 12.5px;
	font-weight: 600;
	color: #0099cc;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	margin-top: 4px;
}

/* Mobile */
@media (max-width: 991.98px) {
	#modal_plantilla_com .modal-dialog {
		margin: 10px;
		max-width: calc(100% - 20px);
	}

	#modal_plantilla_com .modal-body {
		max-height: calc(100dvh - 135px);
		overflow: hidden;
	}

	.comtpl-send-layout {
		display: block;
		height: calc(100dvh - 135px);
		min-height: auto;
		overflow-y: auto;
	}

	.comtpl-send-form,
	.comtpl-send-preview {
		padding: 16px;
		overflow: visible;
	}

	.comtpl-send-preview {
		border-left: 0;
		border-top: 1px solid #eef0f4;
	}

	.comtpl-send-preview .plt-preview-card {
		position: relative;
		top: auto;
	}

	#modal_plantilla_com .modal-footer {
		padding: 12px 16px;
	}

	#btn_confirmar_plantilla_com,
	#modal_plantilla_com .modal-footer .btn {
		width: 100%;
	}
}