/*
 * Editor del Inicio de clinica: «Personalizar» (#4362, F1b de #4355).
 *
 * La geometria de la rejilla vive en hpc-home-widgets.css (sin ningun color). Aqui estan la barra de edicion y los
 * controles de cada tarjeta. Colores: SOLO tokens --ui-* de la interfaz moderna (docs/technical/systems/ui-color-roles.md)
 * y clases de Bootstrap; sin #hex. Los respaldos del tema clasico son `currentColor` (bordes) y `transparent`
 * (fondos), que se adaptan al texto y al fondo de cada tema, de dia y de noche, en las dos marcas.
 * Jade queda para UN boton (Guardar panel, .btn-success); el resto de botones es .btn-default.
 */

/* La barra se alinea con los bordes de las tarjetas (la rejilla lleva -10px de margen y las celdas 15px de relleno). */
.hpcw-toolbar {
	margin: 0 5px 10px;
}

.hpcw-toolbar-view {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 900;
	max-width: calc(100% - 40px);
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: 8px;
}

.hpcw-toolbar-view .hpcw-note:empty {
	display: none;
}

.hpcw-editbar {
	margin-bottom: 0;
}

.hpcw-edit-help {
	margin: 0 0 10px;
}

.hpcw-edit-help:focus {
	outline: none;
}

.hpcw-edit-help-size {
	margin: -4px 0 10px;
	font-size: var(--ui-font-size-sm, 12.5px);
}

.hpcw-edit-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.hpcw-edit-actions .hpcw-spacer {
	flex: 1 1 auto;
}

.hpcw-edit-reset-help {
	font-size: var(--ui-font-size-sm, 12.5px);
}

.hpcw-edit-alert:not(:empty),
.hpcw-edit-catalog,
.hpcw-edit-unavailable:not(:empty) {
	margin-top: 12px;
}

.hpcw-edit-alert .alert {
	margin-bottom: 0;
}

.hpcw-edit-subtitle {
	display: block;
	margin-bottom: 6px;
}

.hpcw-addlist {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hpcw-addlist-empty,
.hpcw-unavailable-list {
	margin: 0;
}

/* ---- Rejilla en edicion ---------------------------------------------------------------- */

/* Una tarjeta quitada sigue en el DOM (montada) pero no se ve ni se arrastra; tambien tras guardar, hasta la recarga. */
.hpc-home-grid > .hpcw-removed {
	display: none !important;
}

.hpcw-editing > .hpcw-empty {
	display: none;
}

/* El contenido de las tarjetas es una vista previa: en edicion no se pulsa nada de lo que hay dentro. */
.hpcw-editing > [data-hpcw-kind] > :not(.hpcw-edit-controls) {
	pointer-events: none;
}

.hpcw-editing > [data-hpcw-kind] > .panel {
	outline: 1px dashed var(--ui-border-control, currentColor);
}

.hpcw-editing > .hpcw-provisional > .panel {
	outline-style: solid;
}

.hpcw-provisional-note {
	margin: 0;
	padding: 18px 0;
	text-align: center;
}

.hpcw-edit-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0 0 6px;
	padding: 6px 8px;
	border: 1px solid var(--ui-border-control, currentColor);
	border-radius: var(--ui-radius, 6px);
	background: var(--ui-surface-2, transparent);
	color: var(--ui-text, inherit);
}

/* El hueco de videos no lleva el relleno lateral de las celdas: su barra se alinea con las demas. */
.hpcw-slot > .hpcw-edit-controls {
	margin-left: 15px;
	margin-right: 15px;
}

.hpcw-edit-handle {
	cursor: move;
	padding: 2px 6px;
	touch-action: none;
}

.hpcw-edit-title {
	flex: 1 1 8em;
	min-width: 0;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.hpcw-edit-fixed {
	font-size: var(--ui-font-size-sm, 12.5px);
}

.hpcw-edit-controls .hpcw-edit-size {
	display: inline-block;
	width: auto;
	max-width: 100%;
}

/* El asa y el hueco que deja una tarjeta al arrastrarla. */
.hpc-home-grid > .hpcw-placeholder {
	visibility: visible !important;
}

.hpc-home-grid > .hpcw-placeholder::before {
	content: "";
	display: block;
	min-height: 96px;
	height: 100%;
	border: 2px dashed var(--ui-accent, currentColor);
	border-radius: var(--ui-radius, 6px);
}

.hpc-home-grid > .ui-sortable-helper {
	box-shadow: var(--ui-shadow-pop, none);
}

/* Guardando: nada se puede tocar hasta que el servidor conteste. */
.hpcw-editing[aria-busy="true"] .hpcw-edit-controls {
	opacity: 0.6;
}

@media (max-width: 767px) {
	.hpcw-toolbar-view {
		justify-content: stretch;
	}

	.hpcw-toolbar-view .btn {
		flex: 1 1 auto;
	}

	/* Objetivos tactiles de tamano comodo. */
	.hpcw-edit-controls .btn {
		min-height: 34px;
	}
}