/*
 * CSS MÍNIMO — solo layout irreducible.
 *
 * Regla dura de la casa: estilos mínimos y heredados. Aquí no hay un solo color,
 * tipografía, borde ni sombra: todo eso lo pone el tema. Lo único propio es la
 * rejilla, que es geometría y ningún tema la resuelve por nosotros.
 *
 * Espaciados de la escala 4 · 8 · 16 · 32 (múltiplos y divisores de 16).
 */

.cmwr-lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	/* min(16rem, 100%) evita que la columna desborde en telefonos angostos:
	   sin el min(), un minmax fijo de 16rem fuerza scroll horizontal bajo 256px. */
	grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
	gap: 32px;
}

.cmwr-item {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.cmwr-item--completo {
	opacity: 0.55;
}

.cmwr-item__foto img {
	max-width: 100%;
	height: auto;
	display: block;
}

.cmwr-item__form,
.cmwr-agregar form {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.cmwr-campo {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.cmwr-tabla {
	width: 100%;
	border-collapse: collapse;
}

.cmwr-tabla th,
.cmwr-tabla td {
	text-align: left;
	padding: 8px;
}

.cmwr-lista-gestion {
	margin-block-end: 32px;
}

/* El formulario como un bloque, no como campos sueltos. El fieldset es semantico;
   aqui solo se le quita el marco que trae por defecto el navegador y se le da el
   mismo flujo vertical que el resto. Ningun color, borde ni tipografia propios. */
.cmwr-item__campos {
	border: 0;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* El avance ocupa el ancho de la tarjeta; su aspecto lo pone el navegador o el tema. */
.cmwr-item__avance {
	width: 100%;
}

/* Un item ya regalado no ofrece acciones: se atenua y no reacciona al cursor. */
.cmwr-item--completo .cmwr-item__foto {
	cursor: default;
}

/* Sin esto, en un telefono angosto la barra de avance y los campos se salen por
   el borde derecho: los <input> traen un ancho intrinseco por su atributo size, y
   un width:100% sobre un elemento con padding suma el padding al ancho.
   Medido a 390px antes de la correccion: desbordaban ~24px.
   Es layout irreducible; no toca color, tipografia ni borde. */
.cmwr-item,
.cmwr-item__campos {
	min-width: 0;
}

.cmwr-item__avance,
.cmwr-item__campos input,
.cmwr-item__campos textarea,
.cmwr-item__campos button {
	box-sizing: border-box;
	max-width: 100%;
}

.cmwr-item__campos input,
.cmwr-item__campos textarea {
	width: 100%;
}