/*
 * Rejilla de widgets del Inicio (#4356, F1a de #4355).
 *
 * Solo geometria: ningun color. El color lo ponen las clases de Bootstrap (.panel, .alert...)
 * y los temas (hpc3.0*.css, hpc-ui.css), de dia y de noche, en las dos marcas; asi una celda
 * nueva no puede traer un color que nadie haya decidido (docs/technical/systems/ui-color-roles.md).
 *
 * Un solo modo de pintado: el layout (por defecto o el de un usuario) es una lista plana y
 * cada widget es UNA celda de la rejilla y UNA tarjeta (section.panel) propia.
 *   .hpc-home-grid                    contenedor, display:grid de 4 columnas
 *     .hpcw.hpcw-size-{small|medium|wide}   un widget = una celda (span 1 / 2 / 4)
 *     .hpcw-slot                            hueco de ancho completo (videos de bienvenida)
 *
 * Las celdas llevan 15 px a cada lado: es lo que daban las columnas de Bootstrap (col-md-*)
 * que repartian el Inicio antes, y los paneles interiores siguen con su margen de siempre.
 */

.hpc-home-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	align-items: start;
}

.hpc-home-grid > .hpcw {
	/* min-width:0: sin esto una celda de rejilla no baja de su contenido y un nombre largo,
	   una tabla o un boton la ensanchan en vez de recortarse o partirse. */
	min-width: 0;
	box-sizing: border-box;
	padding: 0 15px;
}

.hpc-home-grid > .hpcw-size-small {
	grid-column: span 1;
}

.hpc-home-grid > .hpcw-size-medium {
	grid-column: span 2;
}

.hpc-home-grid > .hpcw-size-wide {
	grid-column: 1 / -1;
}

.hpc-home-grid > .hpcw-slot {
	grid-column: 1 / -1;
	min-width: 0;
}

/* Aviso de una rejilla sin ningun bloque pintable (#4362): ancho completo, con el margen lateral de las celdas. */
.hpc-home-grid > .hpcw-empty {
	grid-column: 1 / -1;
	margin: 0 15px 15px;
}

/* El contenido interior se queda en su celda. */
.hpcw .panel,
.hpcw .panel-body {
	min-width: 0;
}

/* Calendario: el tema (.calendar-block) lo hace flotar a la izquierda, con una altura minima de
   474 px y un ancho que le daba col-lg-4, porque antes era una columna de la tarjeta del dia.
   En su celda llena su ancho y mide lo que mide el calendario. */
.hpcw .calendar-block {
	float: none !important;
	width: auto;
	min-height: 0;
	z-index: auto;
}

/* Citas y eventos: cada uno es su tarjeta. El tema flota la etiqueta de estado a la derecha de
   cada fila; con la celda estrecha cae a una segunda linea y, sin esto, quedaba colgando por
   debajo del fondo de la fila. Y el hueco de la cabecera del bloque de eventos (  que solo
   servia para alinearlo con la fecha del de citas, cuando iban en columnas) sobra. */
.hpcw .event-list li {
	display: flow-root;
}

.hpcw--events-today .cal-day {
	display: none;
}

/* Un widget que no cargo: mismo aire que un panel normal, sin hueco extra bajo el aviso. */
.hpcw-failed .alert {
	margin-bottom: 0;
}

/* Cumpleanos: la lista de fichas fluye en fila segun el ANCHO DE LA CELDA (no el de la ventana),
   de modo que valga igual a lo ancho (4 columnas), en una celda de 2 o 1 columna (F1b) y en el
   movil. La regla del propio partial es por ventana (4 por fila a partir de 1200 px, una por
   fila por debajo) y queda como respaldo para navegadores sin container queries.
     celda >= 600 px : fichas de 120 px, tantas como quepan por fila
     celda 346-599   : 4 por fila
     celda <= 345    : 3 por fila, con el avatar encogible y menos aire lateral */
.hpcw--birthdays {
	container-type: inline-size;
}

@container (min-width: 346px) {
	.hpcw--birthdays .mainpage-birthdays-list > .mainpage-birthday-patient {
		flex: 0 0 25%;
		width: 25%;
	}
}

@container (min-width: 600px) {
	.hpcw--birthdays .mainpage-birthdays-list > .mainpage-birthday-patient {
		flex: 0 0 120px;
		width: 120px;
	}
}

@container (max-width: 345px) {
	.hpcw--birthdays .mainpage-birthdays-list > .mainpage-birthday-patient {
		flex: 0 0 33.3333%;
		width: 33.3333%;
		/* Con tres por fila las columnas de Bootstrap (15 px por lado) se comen la mitad de la
		   casilla y "41 años" se parte en dos lineas. */
		padding-left: 3px;
		padding-right: 3px;
	}
}

.hpcw--birthdays .miniprofile-pic img {
	max-width: calc(100% - 4px); /* el borde de 2 px por lado va aparte del ancho */
	height: auto;
	aspect-ratio: 1 / 1;
}

/* Tableta (<= 991 px): 2 columnas; uno de 2 columnas ya llena la fila y uno ancho tambien. */
@media (max-width: 991px) {
	.hpc-home-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Movil (<= 767 px): 1 columna. */
@media (max-width: 767px) {
	.hpc-home-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.hpc-home-grid > .hpcw-size-small,
	.hpc-home-grid > .hpcw-size-medium,
	.hpc-home-grid > .hpcw-size-wide {
		grid-column: 1 / -1;
	}
}