CSS Básico

/* Selector de tipo (elemento) */
p {
    color: var(--text-primary);
    line-height: 1.6;
}

/* Selector de clase */
.card {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 1.5rem;
}

/* Selector de ID */
#site-header {
    position: sticky;
    top: 0;
    z-index: 100;
}

/* Selector universal */
* {
    box-sizing: border-box;
}

/* Selectores de atributo */
input[type="email"] {
    border-color: var(--accent-blue);
}

a[href^="https"]::after {
    content: " \2197";
}

/* Combinador descendiente: todos los 'a' dentro de .nav */
.nav a {
    color: var(--text-secondary);
    text-decoration: none;
}

/* Combinador hijo directo: solo 'li' directos de 'ul' */
.menu > li {
    display: inline-block;
}

/* Selector compuesto: elemento que tiene ambas clases */
.card.active {
    border-color: var(--accent-cyan);
    box-shadow: 0 0 0 2px var(--accent-cyan);
}

/* Hermano adyacente: p inmediatamente despues de h2 */
h2 + p {
    font-size: 1.125rem;
    color: var(--text-secondary);
}

/* Hermano general: todos los p despues de h2 */
h2 ~ p {
    margin-top: 0.5rem;
}

/* Selector :not() - negacion */
input:not([disabled]) {
    cursor: pointer;
}

/* :is() - simplifica selectores largos */
:is(h2, h3, h4):hover {
    color: var(--accent-blue);
}

/* :has() - seleccionar segun descendientes */
.card:has(img) {
    grid-row: span 2;
}

/* Pseudo-clases de interaccion */
.btn:hover {
    transform: translateY(-2px);
}

.btn:focus-visible {
    outline: 2px solid var(--accent-cyan);
    outline-offset: 2px;
}

/* Pseudo-clases estructurales */
li:first-child {
    border-top: none;
}

li:last-child {
    border-bottom: none;
}

/* nth-child: patrones repetitivos */
tr:nth-child(even) {
    background: var(--bg-tertiary);
}

tr:nth-child(odd) {
    background: transparent;
}

/* nth-child con formula: cada 3er elemento */
.grid-item:nth-child(3n) {
    break-after: column;
}

/* Pseudo-elementos */
.card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-blue), var(--accent-cyan));
}

.card::after {
    content: attr(data-label);
    position: absolute;
    top: -10px;
    right: -10px;
    background: var(--accent-green);
    color: #000;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 4px;
}

/* ::placeholder para inputs */
input::placeholder {
    color: var(--text-muted);
    font-style: italic;
}

/* ::selection para texto seleccionado */
::selection {
    background: var(--accent-blue);
    color: #fff;
}

/* Regla de oro: aplicar a todo el proyecto */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* El ancho total del elemento ES el ancho que definis */
.card {
    width: 300px;
    padding: 1.5rem;
    border: 2px solid var(--border-color);
    /* Ancho total = 300px (content + padding + border) */
}

/* Con content-box (default viejo), width es solo el contenido */
.legacy-box {
    box-sizing: content-box;
    width: 300px;
    padding: 1.5rem;  /* 24px cada lado = 48px extra */
    border: 2px solid; /* 4px extra */
    /* Ancho total = 300 + 48 + 4 = 352px (!) */
}

/* Margin: espacio exterior entre elementos */
.card + .card {
    margin-top: 1.5rem;
}

/* Padding: espacio interior del elemento */
.card {
    padding: 1rem;       /* todos los lados */
    padding: 1rem 2rem;   /* arriba/abajo | izq/der */
    padding: 1rem 2rem 3rem; /* arriba | izq/der | abajo */
    padding: 1rem 2rem 3rem 4rem; /* arriba | der | abajo | izq */
}

/* Shorthand de margin (misma logica) */
.spacing-demo {
    margin: 0 auto;       /* 0 arriba/abajo, centrado horizontal */
}

/* Colapso de margenes: solo verticales */
p {
    margin-top: 1rem;
    margin-bottom: 1rem;
    /* Entre dos parrafos, el gap NO es 2rem sino 1rem (colapsan) */
}

/* Ejemplo de conflicto de especificidad */

/* Especificidad: 0, 0, 1 */
p {
    color: blue;
}

/* Especificidad: 0, 1, 0 (gana!) */
.text-error {
    color: red;
}

/* Especificidad: 0, 1, 1 (gana a la clase sola!) */
p.text-error {
    color: darkred;
}

/* Especificidad: 1, 0, 0 (gana a todo lo anterior!) */
#unique-paragraph {
    color: green;
}

/* Malas practicas con especificidad */
.card .card .card .card .card .item {
    /* 0, 6, 1 - muy alta sin necesitarlo */
    /* Si necesitas !important para sobreescribir algo,
       tu especificidad esta mal diseñada */
}

/* Buena practica: manteni especificidad baja y plana */
.card-item {
    /* 0, 1, 0 - facil de sobreescribir cuando haga falta */
}

/* block: ocupa toda la linea, acepta width/height */
/* Default: div, p, h1-h6, ul, ol, li, section, article */
.sidebar {
    display: block;
    width: 280px;
}

/* inline: fluye con el texto, NO acepta width/height */
/* Default: span, a, strong, em, code */
.tag {
    display: inline;
    /* width y height son ignorados */
}

/* inline-block: fluye con texto PERO acepta dimensiones */
/* Default: img, input, button */
.avatar {
    display: inline-block;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    /* Se comporta como inline (no ocupa toda la linea)
       pero respeta width/height como block */
}

/* none: oculta completamente el elemento */
.mobile-only {
    display: none;
}

/* Mostrar en mobile, ocultar en desktop */
@media (max-width: 768px) {
    .mobile-only {
        display: block;
    }
    .desktop-only {
        display: none;
    }
}

/* flex y grid: secciones dedicadas */
.container {
    display: flex;
}

.layout {
    display: grid;
}

/* Valores modernos menos comunes */
.flow-root {
    /* Crea un nuevo BFC (Block Formatting Context)
       Contiene floats sin necesidad de clearfix */
    display: flow-root;
}

/* display: contents - el elemento "desaparece"
   y sus hijos se comportan como hijos del padre */
.grid-item-contents {
    display: contents;
}

/* static (default): flujo normal, top/left/ bottom/right no tienen efecto */
.element {
    position: static;
}

/* relative: se mueve respecto a su posicion normal
   Sigue ocupando su espacio original en el flujo */
.card {
    position: relative;
    /* top/left lo desplazan desde donde estaria normalmente */
}

.card:hover {
    top: -4px;    /* se mueve 4px para arriba */
    left: 2px;    /* se mueve 2px para la derecha */
}

/* absolute: se posiciona respecto al ancestro posicionado mas cercano
   Si no hay ninguno, usa el viewport (html) */
.card .badge {
    position: absolute;
    top: 10px;
    right: 10px;
    /* Se posiciona dentro de .card porque .card tiene position: relative */
}

/* fixed: se posiciona respecto al viewport (no se mueve con scroll)
   Ideal para headers, botones flotantes, toasts */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
}

.back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    /* Siempre visible en la esquina inferior derecha */
}

/* sticky: se comporta como relative hasta un punto de scroll,
   luego se "pega" como si fuera fixed
   Necesita al menos un top/bottom declarado */
.table-header th {
    position: sticky;
    top: 0;         /* Se pega cuando el scroll llega arriba */
    z-index: 10;
    background: var(--bg-secondary);
}

/* z-index: controla el orden de apilamiento (solo funciona con position) */
.tooltip {
    position: absolute;
    z-index: 50;    /* Por encima de los demas elementos */
}

/* Nota: z-index solo funciona en elementos posicionados
   (position distinto de static) o en elementos flex/grid */

/* visible (default): el contenido se desborda normalmente */
.overflow-visible {
    overflow: visible;
}

/* hidden: corta el contenido que excede */
.card-image {
    overflow: hidden;
    height: 200px;
    /* La imagen se corta si es mas alta que 200px */
}

/* scroll: siempre muestra barras (incluso si no es necesario) */
.code-block {
    overflow: scroll;
    /* Barras siempre visibles - poco usado hoy */
}

/* auto: scroll solo cuando es necesario (el mas comun) */
.code-block {
    overflow: auto;
    /* Scroll horizontal si el codigo es largo,
       scroll vertical si el contenido excede la altura */
}

/* Control por eje */
.container {
    overflow-x: auto;   /* Scroll horizontal para carousel */
    overflow-y: hidden;  /* Sin scroll vertical */
}

/* Texto largo en una linea con scroll horizontal */
.text-nowrap {
    white-space: nowrap;
    overflow-x: auto;
}

/* Crear un BFC con overflow para contener floats */
.clearfix-modern {
    overflow: hidden; /* Crea un Block Formatting Context */
}

/* Clip de imagenes con border-radius */
.rounded-image {
    overflow: hidden;
    border-radius: 12px;
}

/* Contenedor de carousel horizontal */
.carousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 1rem;
}

.carousel-item {
    scroll-snap-align: start;
    flex: 0 0 80%;
}

/* Uso moderno de float: texto alrededor de imagen */
.article-image {
    float: left;
    width: 250px;
    margin: 0 1.5rem 0.5rem 0;
}

.article-image.right {
    float: right;
    margin: 0 0 0.5rem 1.5rem;
}

/* clear: impedir que un elemento se ubique al lado de un float */
.clear-below {
    clear: both;    /* ambos lados */
    clear: left;   /* solo izquierdo */
    clear: right;  /* solo derecho */
}

/* Clearfix hack (solucion clasica para el colapso del padre) */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* Solucion moderna: flow-root (reemplaza clearfix) */
.container-moderno {
    display: flow-root;
    /* Crea un BFC que contiene a los floats
       Sin efectos secundarios de overflow: hidden */
}

/* NO uses float para layout - usa flex o grid */
.antipatron {
    /* float: left;       NO */
    /* width: 33.333%;    NO */
    /* Usa grid en su lugar: */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

/* image-rendering para imagenes flotadas */
img.float-img {
    float: left;
    shape-outside: circle();  /* El texto rodea la forma circular */
    border-radius: 50%;
    margin-right: 1rem;
}

/* === margin === */
/* 1 valor: todos los lados */
margin: 1rem;              /* top right bottom left = 1rem */

/* 2 valores: vertical | horizontal */
margin: 1rem 2rem;         /* top/bottom = 1rem, left/right = 2rem */

/* 3 valores: top | horizontal | bottom */
margin: 1rem 2rem 3rem;    /* top=1rem, left/right=2rem, bottom=3rem */

/* 4 valores: top | right | bottom | left (sentido horario) */
margin: 1rem 2rem 3rem 4rem;

/* === padding: mismo orden que margin === */
padding: 1rem 2rem;

/* === border: width style color === */
border: 1px solid var(--border-color);
border-top: 2px dashed var(--accent-blue);
border-radius: 8px;
border-radius: 50% 0 50% 0;  /* esquinas individuales */

/* === background: color image position/size repeat === */
background: var(--bg-primary);
background: url("img.jpg") center/cover no-repeat;
/* Es lo mismo que:
   background-color: var(--bg-primary);
   background-image: url("img.jpg");
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat; */

/* === font: style weight size/line-height family === */
font: italic 600 1.5rem/1.6 "Inter", sans-serif;
/* Nota: font-size y font-family son obligatorios en el shorthand */

/* === transition: property duration timing-function delay === */
transition: transform 0.3s ease 0s;
transition: all 0.3s ease;       /* atencion: all puede generar problemas */
transition: transform 0.3s ease, opacity 0.3s ease;

/* === animation: name duration timing-function delay iteration-count direction fill-mode === */
animation: fadeIn 0.6s ease forwards;

/* === flex shorthand (en el item, no el contenedor) === */
flex: 1;              /* flex-grow: 1; flex-shrink: 1; flex-basis: 0% */
flex: 0 0 200px;      /* no crece, no se achica, mide 200px */
flex: 1 1 auto;       /* crece, se achica, tamano del contenido */

/* === list-style: type position image === */
list-style: square inside;
list-style: none;      /* quitar bullets */

/* === outline (para focus, debugging) === */
outline: 2px solid var(--accent-cyan);
outline-offset: 2px;