.card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	word-wrap: break-word;
	/* width: fit-content; */
	/* border-radius: var(--border-radius-corner-lg, 16px); */
	background: var(--color-neutral-0, #FFF);
	overflow: hidden;
}

.comp-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	word-wrap: break-word;
	/* width: fit-content; */
	border-radius: var(--border-radius-corner-lg, 16px);
	background: var(--color-neutral-0, #FFF);
	overflow: hidden;
	margin-bottom: 0;
}

.card.card-8 .body-card {
	padding: var(--spacing-space-3);
}

.card.card-12 .body-card {
	padding: var(--spacing-space-4);
}

.card.card-16 .body-card {
	padding: var(--spacing-space-5);
}

.card.card-20 .body-card {
	padding: var(--spacing-space-6);
}

.card.card-24 .body-card {
	padding: var(--spacing-space-7);
}

.card.card-borded {
	outline: 1px solid var(--color-neutral-200, #D5DFEC);
}

.card.card-elevated {
	box-shadow: 0px 2px 8px 0px rgba(21, 30, 40, 0.08);
}

/* ESTADOS DE CARD BORDEADA */
.card.card-borded.dinamic,
.card.card-elevated.dinamic {
	cursor: pointer;
}

.card.card-borded.dinamic:not(.active):hover {
	outline: 1px solid var(--color-neutral-200, #D5DFEC);
	box-shadow: 0px 6px 20px -2px rgba(21, 30, 40, 0.08);
}

.card.card-borded.dinamic:not(.active):active {
	outline: 1px solid var(--color-neutral-300, #B7C9DF);
	box-shadow: 0px 8px 32px -2px rgba(38, 54, 69, 0.16);
}

.card.card-borded.dinamic.active {
	outline: 2px solid var(--color-primary-600, #0E55B9) !important;
}

.card.card-borded.dinamic.error {
	outline: 2px solid var(--color-danger-600, #D82525) !important;
}

.card.card-borded.dinamic.dragging {
	outline: 2px solid var(--color-neutral-300, #B7C9DF);
	box-shadow: 0px 8px 32px -2px rgba(38, 54, 69, 0.16);
	cursor: grabbing;
}


/* ESTADOS DE CARD ELEVADA */

.card.card-elevated.dinamic:not(.active):hover {
	box-shadow: 0px 6px 20px -2px rgba(21, 30, 40, 0.08);
}

.card.card-elevated.dinamic:not(.active):active {
	box-shadow: 0px 8px 32px -2px rgba(38, 54, 69, 0.16);
}

.card.card-elevated.dinamic.active {
	outline: 2px solid var(--color-primary-600, #0E55B9) !important;
}

.card.card-elevated.dinamic.error {
	outline: 2px solid var(--color-danger-600, #D82525) !important;
}

.card.card-elevated.dinamic.dragging {
	outline: 1px solid var(--color-neutral-200, #D5DFEC);
	box-shadow: 0px 8px 32px -2px rgba(38, 54, 69, 0.16);
	cursor: grabbing;
}

.card.card-borded.dinamic:focus-visible,
.card.card-elevated.dinamic:focus-visible {
	outline: 2px solid var(--color-neutral-400, #F3F4F7);
	box-shadow: 0px 0px 0px 2px var(--color-neutral-400, #8CA2B5);
}


/* ESTILOS DE CARD CON IMAGEN ENCIMA DEL BODY */
.card.card-img {
	display: grid;
	grid-template-areas: 'img' 'body';
	grid-template-columns: auto;
	grid-template-rows: auto;
}

.card.card-img .img-card {
	grid-area: img;
	background-color: var(--color-neutral-100);
	border-radius: var(--border-radius-corner-lg, 16px) var(--border-radius-corner-lg, 16px) 0 0;
}

.card.card-img .img-card img {
	object-fit: cover;
	width: 100%;
}

.card.card-img .body-card {
	grid-area: body;
}

.card.card-img .footer-card {
	grid-area: footer;
}

/* ESTILOS DE CARD CON IMAGEN ENCIMA DEL BODY */

.card--fitcontent{
	width: fit-content;
}