/*
 * DRDA Cookie Consent Management Platform — styles
 * Aditivo: extiende el componente .alert del tema Ohio con la fila de
 * acciones del banner CMP y el modal de preferencias.
 * No reescribe ninguna regla del tema.
 */

/* === Banner CMP === */
.notification.-cmp[hidden] { display: none; }

.notification.-cmp .alert-message {
	max-width: 56ch;
}

.notification.-cmp .cmp-actions {
	display: inline-flex;
	gap: var(--clb-gap-small, 8px);
	flex-wrap: wrap;
	align-items: center;
}

.notification.-cmp .cmp-actions .button {
	white-space: nowrap;
}

/* Estilo de los botones del banner si el tema no los provee con esos modificadores */
.notification.-cmp .cmp-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: calc(var(--clb-spacer-1, 6px)) var(--clb-spacer-2, 12px);
	border-radius: var(--clb-border-radius, 6px);
	font: inherit;
	font-size: var(--clb-font-size-small, 0.875rem);
	line-height: 1.2;
	cursor: pointer;
	border: 1px solid currentColor;
	background: transparent;
	color: inherit;
	transition: all var(--clb-transition-function, ease) var(--clb-transition-duration, 0.2s);
}

.notification.-cmp .cmp-button:not(.-primary):hover { opacity: 0.85; }

/* (Primary button rules live at end of file) */

@media (max-width: 768px) {
	.notification.-cmp .alert.-fixed {
		flex-direction: column;
		align-items: stretch;
		gap: var(--clb-spacer-2, 10px);
	}
	.notification.-cmp .alert-message { max-width: none; }
	.notification.-cmp .cmp-actions {
		width: 100%;
		justify-content: stretch;
	}
	.notification.-cmp .cmp-actions .cmp-button { flex: 1 1 auto; }
}

/* === Modal de preferencias === */
.cmp-modal[hidden] { display: none; }

.cmp-modal {
	position: fixed;
	inset: 0;
	z-index: 60;
	font: inherit;
}

.cmp-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
}

.cmp-modal__panel {
	position: relative;
	margin: 5vh auto;
	max-width: 560px;
	width: calc(100% - 2 * var(--clb-grid-gutter, 24px));
	background: var(--clb-color-white, #fff);
	color: inherit;
	border-radius: var(--clb-border-radius, 8px);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	max-height: 90vh;
}

.cmp-modal__head,
.cmp-modal__foot {
	padding: var(--clb-spacer-3, 18px);
	display: flex;
	align-items: center;
	gap: var(--clb-gap-small, 8px);
	flex-wrap: wrap;
}

.cmp-modal__head {
	justify-content: space-between;
	border-bottom: 1px solid color-mix(in srgb, currentColor 10%, transparent);
}

.cmp-modal__head h2 {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.3;
}

.cmp-modal__body {
	padding: 0 var(--clb-spacer-3, 18px) var(--clb-spacer-3, 18px);
	overflow-y: auto;
}

.cmp-modal__body p:first-child { margin-top: var(--clb-spacer-3, 18px); }

.cmp-modal__foot {
	justify-content: flex-end;
	border-top: 1px solid color-mix(in srgb, currentColor 10%, transparent);
}

@media (max-width: 480px) {
	.cmp-modal__foot { justify-content: stretch; }
	.cmp-modal__foot .cmp-button { flex: 1 1 auto; }
}

/* === Categorías === */
.cmp-cats {
	list-style: none;
	padding: 0;
	margin: var(--clb-spacer-3, 18px) 0 0;
	display: flex;
	flex-direction: column;
	gap: var(--clb-spacer-2, 12px);
}

.cmp-cat {
	border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
	border-radius: var(--clb-border-radius, 6px);
	padding: var(--clb-spacer-2, 12px);
}

.cmp-cat label {
	display: grid;
	grid-template-columns: 1fr auto;
	row-gap: 4px;
	column-gap: var(--clb-spacer-2, 12px);
	align-items: center;
	cursor: pointer;
}

.cmp-cat__name {
	font-weight: 600;
	grid-column: 1;
	grid-row: 1;
}

.cmp-cat__hint {
	color: color-mix(in srgb, currentColor 70%, transparent);
	font-size: 0.875rem;
	grid-column: 1 / -1;
	grid-row: 2;
}

.cmp-cat input[type="checkbox"] {
	grid-column: 2;
	grid-row: 1;
	width: 18px;
	height: 18px;
	cursor: pointer;
}

.cmp-cat input[type="checkbox"][disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}

/* === CMP primary button (final override) === */

.notification.-cmp button.cmp-button.-primary,
.notification.-cmp .cmp-button.-primary {
  background-color: #e10098 !important;
  border-color: #e10098 !important;
  color: #fff !important;
  opacity: 1 !important;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.notification.-cmp button.cmp-button.-primary:hover,
.notification.-cmp .cmp-button.-primary:hover,
.notification.-cmp button.cmp-button.-primary:focus:hover,
.notification.-cmp .cmp-button.-primary:focus:hover {
  background-color: #4a4a4a !important;
  border-color: #4a4a4a !important;
  color: #fff !important;
  opacity: 1 !important;
}

.notification.-cmp button.cmp-button.-primary:focus-visible,
.notification.-cmp .cmp-button.-primary:focus-visible {
  outline: 2px solid var(--clb-color-neutral, #111);
  outline-offset: 3px;
}

.notification.-cmp button.cmp-button.-primary:active,
.notification.-cmp .cmp-button.-primary:active {
  background-color: var(--clb-color-neutral, #111) !important;
  border-color: var(--clb-color-neutral, #111) !important;
  color: #fff !important;
}