====== 02 - CSS ======

**CSS** (*Cascading Style Sheets*) define el aspecto de un documento HTML: colores, tamaños, disposición de los elementos. Se escribe en archivos ''.css'' enlazados desde el HTML.

<sxh html>
<link rel="stylesheet" href="styles.css">
</sxh>

===== 1. Sintaxis =====

<sxh css>
/* selector { propiedad: valor; } */
h1 {
  color: #1a1a1a;
  font-size: 2rem;
}

.card {
  border: 1px solid #ddd;
  padding: 1rem;
}
</sxh>

===== 2. Selectores =====

^ Selector ^ Aplica a ^
| ''p'' | Todos los elementos ''<p>'' |
| ''.card'' | Elementos con ''class="card"'' |
| ''#main'' | El elemento con ''id="main"'' |
| ''nav a'' | Enlaces dentro de ''<nav>'' |
| ''input[type=email]'' | Inputs de tipo email |

<sxh css>
nav a {
  text-decoration: none;
}

input[type=email] {
  border-color: #4a90d9;
}
</sxh>

Cuando varios selectores aplican al mismo elemento, gana el más **específico**: el ''id'' supera a la clase y la clase al selector de elemento.

===== 3. Modelo de caja =====

Cada elemento es una caja con contenido, ''padding'', ''border'' y ''margin'':

<sxh text>
┌─────────── margin ───────────┐
│  ┌──────── border ─────────┐ │
│  │  ┌───── padding ─────┐  │ │
│  │  │     contenido     │  │ │
│  │  └───────────────────┘  │ │
│  └─────────────────────────┘ │
└──────────────────────────────┘
</sxh>

<sxh css>
* {
  box-sizing: border-box;   /* el ancho incluye padding y borde */
}

.card {
  padding: 1rem;
  margin-bottom: 0.5rem;
}
</sxh>

===== 4. Flexbox =====

**Flexbox** distribuye los hijos de un contenedor en una dirección:

<sxh css>
.catalog {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.catalog .card {
  flex: 1 1 200px;   /* crece, encoge, base */
}
</sxh>

^ Propiedad ^ Función ^
| ''display: flex'' | Activa el modo flex en el contenedor |
| ''justify-content'' | Distribución en el eje principal |
| ''align-items'' | Alineación en el eje cruzado |
| ''gap'' | Separación entre elementos |
| ''flex-wrap'' | Permite saltar de línea |

===== 5. Responsivo básico =====

<sxh css>
body {
  font-size: 1rem;
  max-width: 60rem;
  margin: 0 auto;
}

@media (max-width: 600px) {
  .catalog .card {
    flex-basis: 100%;
  }
}
</sxh>

  * Unidades relativas (''rem'', ''%'') frente a píxeles fijos.
  * ''max-width'' y ''margin: auto'' centran el contenido.
  * Las **media queries** aplican reglas según el tamaño de pantalla.

<note tip>Estilos en archivo externo, clases con nombres significativos y selectores sencillos. Como la mayor parte del front se genera con IA, tu papel es entender, revisar y ajustar el resultado.</note>