{
	"$schema": "../../schemas/code-crispies-module-schema.json",
	"id": "box-model",
	"title": "CSS Box Model",
	"description": "Domina los principios fundamentales de gestión del espacio en diseño web a través del modelo de caja CSS. Este módulo explora cómo el contenido, padding, bordes y márgenes se combinan para crear estructuras de diseño.",
	"difficulty": "beginner",
	"lessons": [
		{
			"id": "box-model-1",
			"title": "Padding",
			"description": "Cada elemento en CSS es una caja con cuatro capas: contenido, padding, borde y margen. <strong>Padding</strong> crea espacio entre tu contenido y el borde de la caja.<br><br>Sin padding, el texto se aprieta incómodamente contra los bordes. El padding hace que el contenido sea legible y visualmente equilibrado.<br><br><pre>.card {\n  padding: 1rem;\n}</pre>",
			"task": "El texto dentro de esta tarjeta de perfil está pegado a los bordes. Dale algo de espacio interior para respirar.",
			"previewHTML": "<article class=\"card\"><h3>Sarah Chen</h3><p>Frontend Developer</p></article>",
			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; background: #f5f5f5; } .card { background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .card h3 { margin: 0 0 4px; } .card p { margin: 0; color: #666; }",
			"sandboxCSS": "",
			"codePrefix": ".card {\n  ",
			"initialCode": "",
			"codeSuffix": "\n}",
			"solution": "padding: 1rem;",
			"previewContainer": "preview-area",
			"validations": [
				{
					"type": "property_value",
					"value": { "property": "padding", "expected": "1rem" },
					"message": "¿Qué propiedad añade espacio entre el contenido y el borde del elemento?"
				}
			]
		},
		{
			"id": "box-model-2",
			"title": "Borders",
			"description": "Los bordes crean límites visuales alrededor de los elementos. El atajo <kbd>border</kbd> acepta tres valores: ancho, estilo y color.<br><br>Estilos comunes: <kbd>solid</kbd>, <kbd>dashed</kbd>, <kbd>dotted</kbd>, <kbd>none</kbd>",
			"task": "Esta tarjeta necesita una línea de acento de color en su borde izquierdo.",
			"previewHTML": "<article class=\"card\"><h3>Sarah Chen</h3><p>Frontend Developer</p></article>",
			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; background: #f5f5f5; } .card { background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); padding: 1rem; } .card h3 { margin: 0 0 4px; } .card p { margin: 0; color: #666; }",
			"sandboxCSS": "",
			"codePrefix": ".card {\n  ",
			"initialCode": "",
			"codeSuffix": "\n}",
			"solution": "border-left: 4px solid steelblue;",
			"previewContainer": "preview-area",
			"validations": [
				{
					"type": "regex",
					"value": "border-left:\\s*4px\\s+solid\\s+steelblue",
					"message": "Usa el atajo que define un borde en un solo lado",
					"options": { "caseSensitive": false }
				}
			]
		},
		{
			"id": "box-model-3",
			"title": "Margins",
			"description": "Los márgenes crean espacio <em>fuera</em> del elemento, separándolo de sus vecinos. Mientras que el padding empuja el contenido hacia adentro, los márgenes empujan otros elementos hacia afuera.",
			"task": "Estas dos tarjetas de perfil se están tocando. Añade algo de espacio debajo de cada tarjeta para separarlas.",
			"previewHTML": "<article class=\"card\"><h3>Sarah Chen</h3><p>Frontend Developer</p></article><article class=\"card\"><h3>Alex Rivera</h3><p>UX Designer</p></article>",
			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; background: #f5f5f5; } .card { background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); padding: 1rem; border-left: 4px solid steelblue; } .card h3 { margin: 0 0 4px; } .card p { margin: 0; color: #666; }",
			"sandboxCSS": "",
			"codePrefix": ".card {\n  ",
			"initialCode": "",
			"codeSuffix": "\n}",
			"solution": "margin-bottom: 1rem;",
			"previewContainer": "preview-area",
			"validations": [
				{
					"type": "property_value",
					"value": { "property": "margin-bottom", "expected": "1rem" },
					"message": "¿Qué propiedad empuja los elementos vecinos hacia abajo?"
				}
			]
		},
		{
			"id": "box-model-4",
			"title": "Box Sizing",
			"description": "Por defecto, <kbd>width</kbd> solo establece el ancho del contenido. Padding y bordes se suman al total. Esto causa problemas de diseño.<br><br><kbd>box-sizing: border-box</kbd> incluye padding y borde en el ancho, haciendo el dimensionamiento predecible. La mayoría de desarrolladores aplican esto a todos los elementos.",
			"task": "Ambas tarjetas tienen el mismo ancho, pero la izquierda se desborda porque el padding y el borde se suman encima. Corrige la tarjeta derecha para que su tamaño incluya el padding y el borde.",
			"previewHTML": "<div class=\"demo\"><article class=\"card\">Content-box</article><article class=\"card fix\">Border-box</article></div>",
			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; background: #f5f5f5; } .demo { display: flex; gap: 1rem; } .card { width: 200px; padding: 1rem; border: 4px solid steelblue; background: white; border-radius: 8px; }",
			"sandboxCSS": "",
			"codePrefix": ".fix {\n  ",
			"initialCode": "",
			"codeSuffix": "\n}",
			"solution": "box-sizing: border-box;",
			"previewContainer": "preview-area",
			"validations": [
				{
					"type": "property_value",
					"value": { "property": "box-sizing", "expected": "border-box" },
					"message": "¿Qué modo de tamaño incluye padding y borde en el ancho del elemento?"
				}
			]
		},
		{
			"id": "box-model-5",
			"title": "Padding Shorthand",
			"description": "Padding acepta 1-4 valores:<br>• 1 valor: todos los lados<br>• 2 valores: vertical | horizontal<br>• 4 valores: arriba | derecha | abajo | izquierda",
			"task": "Este botón se siente muy apretado. Dale más espacio en los lados que arriba y abajo, usando el atajo de dos valores.",
			"previewHTML": "<button class=\"btn\">Follow</button>",
			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .btn { background: steelblue; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 1rem; }",
			"sandboxCSS": "",
			"codePrefix": ".btn {\n  ",
			"initialCode": "",
			"codeSuffix": "\n}",
			"solution": "padding: 8px 1rem;",
			"previewContainer": "preview-area",
			"validations": [
				{
					"type": "regex",
					"value": "padding:\\s*8px\\s+1rem",
					"message": "Usa el atajo de dos valores: vertical primero, luego horizontal",
					"options": { "caseSensitive": false }
				}
			]
		},
		{
			"id": "box-model-6",
			"title": "Margin Shorthand",
			"description": "Margin usa el mismo patrón de atajo que padding. Un patrón común es centrar elementos de bloque horizontalmente con <kbd>margin: 0 auto</kbd>.",
			"task": "Esta tarjeta está pegada a la izquierda. Céntrala horizontalmente usando el atajo de margen con márgenes laterales automáticos.",
			"previewHTML": "<article class=\"card\"><h3>Sarah Chen</h3><p>Frontend Developer</p></article>",
			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; background: #f5f5f5; } .card { width: 250px; background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); padding: 1rem; border-left: 4px solid steelblue; } .card h3 { margin: 0 0 4px; } .card p { margin: 0; color: #666; }",
			"sandboxCSS": "",
			"codePrefix": ".card {\n  ",
			"initialCode": "",
			"codeSuffix": "\n}",
			"solution": "margin: 0 auto;",
			"previewContainer": "preview-area",
			"validations": [
				{
					"type": "regex",
					"value": "margin:\\s*0\\s+auto",
					"message": "Usa el atajo que calcula márgenes horizontales iguales automáticamente",
					"options": { "caseSensitive": false }
				}
			]
		},
		{
			"id": "box-model-7",
			"title": "Border Radius",
			"description": "Aunque no es parte del modelo de caja clásico, <kbd>border-radius</kbd> redondea las esquinas de la caja de borde de un elemento. Usa <kbd>50%</kbd> en un elemento cuadrado para crear un círculo.",
			"task": "La imagen cuadrada del avatar debería aparecer como un círculo perfecto.",
			"previewHTML": "<article class=\"card\"><img class=\"avatar\" src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='35' r='25' fill='%23666'/%3E%3Ccircle cx='50' cy='90' r='40' fill='%23666'/%3E%3C/svg%3E\" alt=\"Avatar\"><h3>Sarah Chen</h3><p>Frontend Developer</p></article>",
			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; background: #f5f5f5; } .card { background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); padding: 1rem; text-align: center; } .avatar { width: 80px; height: 80px; background: #ddd; margin-bottom: 8px; } .card h3 { margin: 0 0 4px; } .card p { margin: 0; color: #666; }",
			"sandboxCSS": "",
			"codePrefix": ".avatar {\n  ",
			"initialCode": "",
			"codeSuffix": "\n}",
			"solution": "border-radius: 50%;",
			"previewContainer": "preview-area",
			"validations": [
				{
					"type": "property_value",
					"value": { "property": "border-radius", "expected": "50%" },
					"message": "¿Qué propiedad redondea las esquinas? Piensa en qué porcentaje crea un círculo"
				}
			]
		},
		{
			"id": "box-model-8",
			"title": "Complete Card",
			"description": "Combinemos todo. Esta tarjeta de notificación necesita estilo para verse profesional.",
			"task": "Esta notificación necesita tres cosas: espacio interior para que el texto no esté apretado, un acento de color en el borde izquierdo y esquinas ligeramente redondeadas.",
			"previewHTML": "<div class=\"alert\"><strong>New message</strong><p>You have 3 unread notifications</p></div>",
			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .alert { background: seashell; } .alert strong { color: coral; } .alert p { margin: 4px 0 0; color: #666; }",
			"sandboxCSS": "",
			"codePrefix": ".alert {\n  ",
			"initialCode": "",
			"codeSuffix": "\n}",
			"solution": "padding: 1rem;\n  border-left: 4px solid coral;\n  border-radius: 4px;",
			"previewContainer": "preview-area",
			"validations": [
				{
					"type": "property_value",
					"value": { "property": "padding", "expected": "1rem" },
					"message": "Añade espacio interior a la notificación"
				},
				{
					"type": "regex",
					"value": "border-left:\\s*4px\\s+solid\\s+coral",
					"message": "Añade un acento de color en el borde izquierdo",
					"options": { "caseSensitive": false }
				},
				{
					"type": "property_value",
					"value": { "property": "border-radius", "expected": "4px" },
					"message": "Suaviza las esquinas de la notificación"
				}
			]
		}
	]
}