/* Paleta de colores */
:root {
  --azul-marino: #111053;   /* Azul marino profundo */
  --azul-suave: #d7d9e5;    /* Azul verdoso suave */
  --blanco-roto: #f5f5f0;   /* Fondo neutro */
  --gris-claro: #eef0f7;       /* nuevo tono más claro */
  --azul-hover: rgba(111,170,192,0.4); /* azul transparente */


}

/* Reset básico */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
 font-family: Verdana, Geneva, Tahoma, sans-serif;
  background: var(--blanco-roto);
  color: #333;
  line-height: 1.6;
}

/* Encabezado */
header {
 background-color: #111053;
 padding: 2rem;
 color: var(--blanco-roto);
}

.encabezado .fila {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  font-size: larger;
  color: white;
}


.encabezado .titulo h3 {
  color: var(--blanco-roto);
  font-size: 1.8rem;
  font-weight: lighter;
  text-align: center;
}

body h4 {
 font-size: x-large;
 text-align: center;


}
/* Tablas */

table {
  width: 60%;
  margin: 2rem auto;
  border-collapse: collapse;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* Estilo general para captions */
caption {
  caption-side: top;
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

/* Ícono HTML5 */
caption i {
  color: #e34c26;   /* naranja HTML5 */
  margin-right: 6px;
}

/* Estilo para el caption de CSS */
.caption-css {
  color: #264de4;   /* azul CSS3 */
}
.caption-css i {
  color: #264de4;
}

/* Estilo para el caption de PHP */
.caption-php {
  color: #777bb3;   /* violeta/azul PHP */
}
.caption-php i {
  color: #777bb3;
}

/* Estilo para el caption de JavaScript */
.caption-js {
  color: #f7df1e;   /* amarillo JS */
}
.caption-js i {
  color: #f7df1e;
}

/* SQL */
.caption-sql {
  color: #00758f;   /* azul característico de SQL/MySQL */
}
.caption-sql i {
  color: #00758f;
}


/* Proyecto */
.caption-proyecto {
  color: #ff6600;   /* naranja para destacar proyectos */
}
.caption-proyecto i {
  color: #ff6600;
}



/* Encabezados */


th {
  background: var(--azul-marino);
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  color: var(--blanco-roto);
  padding: 0.8rem;
  text-align: center;
  border: 1px solid #ccc; /* borde en encabezados */
}

/* Ícono a la derecha del texto */
.icon-right {
  display: flex;          /* activa flexbox */
  justify-content: space-between; /* texto a la izquierda, ícono a la derecha */
  align-items: center;    /* alineación vertical */
}

.icon-right i {
  font-size: 20px;        /* tamaño del ícono */
  margin-left: 8px;       /* espacio entre texto e ícono */
  color: #e34c26;         /* color típico de HTML5 */
}


/* Celdas */
td {
  padding: 0.8rem;
  border: 1.5px solid #030253; /* borde en todas las celdas */
}

/* Filas pares */
tr:nth-child(even) {
  background: #eef0f7; /* gris-azulado mucho más claro */
  color: #031639;
}


/* Hover: aclarar tono */
tr:hover {
  background-color: rgba(111, 170, 192, 0.4); /* azul con transparencia */
  transition: background-color 0.3s ease;
}



/* Botones / enlaces */
a.boton {
  display: inline-block;
  padding: 0.5rem 1rem;
  background-color: none;
  color: #03052c;
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.3s ease;
}

a.boton:hover {
  background: var(--azul-suave);
  color: #fff;
}

/* Footer */
footer {
  background: var(--azul-marino);
  color: var(--blanco-roto);
  text-align: center;
  padding: 1rem;
  margin-top: 2rem;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .encabezado .fila {
    flex-direction: column;
    text-align: center;
  }

  table {
    font-size: 0.9rem;
  }

  th, td {
    padding: 0.5rem;
  }

  a.boton {
    display: block;
    margin: 0.3rem 0;
    text-align: center;
  }
}

@media (max-width: 480px) {
  body {
    font-size: 0.9rem;
  }

  .encabezado .titulo h3 {
    font-size: 1.2rem;
  }

  table {
    width: 100%;
  }
}



/* ============================
   🎨 CHULETA DE CSS COMPLETA
   ============================ */

/* ----------------------------
   📝 TEXTO Y TIPOGRAFÍA
---------------------------- */
/* font-family: define la fuente (Arial, Verdana, etc.) */
/* font-size: tamaño del texto (px, em, rem, %) */
/* font-weight: grosor (normal, bold, 100–900) */
/* font-style: estilo (normal, italic, oblique) */
/* font-variant: variantes (small-caps, etc.) */
/* line-height: altura de línea */
/* letter-spacing: espacio entre letras */
/* word-spacing: espacio entre palabras */
/* text-align: alineación (left, right, center, justify) */
/* text-transform: mayúsculas/minúsculas (uppercase, lowercase, capitalize) */
/* text-decoration: subrayado, tachado (underline, line-through, none) */
/* text-shadow: sombra del texto (x y blur color) */
/* white-space: control de saltos (normal, nowrap, pre, pre-wrap) */
/* direction: dirección del texto (ltr, rtl) */

/* ----------------------------
   🎨 COLOR Y FONDO
---------------------------- */
/* color: color del texto */
/* background-color: color de fondo */
/* background-image: imagen de fondo (url) */
/* background-repeat: repetición (repeat, no-repeat, repeat-x, repeat-y) */
/* background-position: posición (top, center, bottom, left, right) */
/* background-size: tamaño (cover, contain, px, %) */
/* background-attachment: scroll o fijo (scroll, fixed) */
/* opacity: transparencia (0–1) */

/* ----------------------------
   📦 CAJAS Y DIMENSIONES
---------------------------- */
/* width: ancho */
/* height: alto */
/* min-width / max-width: límites de ancho */
/* min-height / max-height: límites de alto */
/* overflow: manejo de exceso (visible, hidden, scroll, auto) */
/* box-sizing: modelo de caja (content-box, border-box) */

/* ----------------------------
   📐 MÁRGENES Y PADDING
---------------------------- */
/* margin: margen exterior (top, right, bottom, left) */
/* padding: espacio interior (top, right, bottom, left) */

/* ----------------------------
   🔲 BORDES
---------------------------- */
/* border: borde completo (width style color) */
/* border-width: grosor */
/* border-style: estilo (solid, dashed, dotted, double, none) */
/* border-color: color */
/* border-radius: esquinas redondeadas */
/* outline: contorno externo */

/* ----------------------------
   🌟 SOMBRAS Y EFECTOS
---------------------------- */
/* box-shadow: sombra de caja (x y blur spread color) */
/* filter: efectos (blur, brightness, contrast, grayscale, sepia, hue-rotate) */

/* ----------------------------
   📍 POSICIONAMIENTO
---------------------------- */
/* position: tipo (static, relative, absolute, fixed, sticky) */
/* top / right / bottom / left: coordenadas */
/* z-index: orden de apilamiento */
/* float: flotación (left, right, none) */
/* clear: limpiar flotación (left, right, both) */

/* ----------------------------
   🧩 DISPLAY Y FLEXBOX
---------------------------- */
/* display: tipo de caja (block, inline, inline-block, flex, grid, none) */
/* flex-direction: dirección (row, column, row-reverse, column-reverse) */
/* flex-wrap: ajuste (nowrap, wrap, wrap-reverse) */
/* justify-content: alineación horizontal (flex-start, flex-end, center, space-between, space-around, space-evenly) */
/* align-items: alineación vertical (flex-start, flex-end, center, stretch, baseline) */
/* align-content: alineación de múltiples líneas */
/* gap: espacio entre elementos */

/* ----------------------------
   🧮 GRID
---------------------------- */
/* grid-template-columns: definición de columnas */
/* grid-template-rows: definición de filas */
/* grid-gap: espacio entre celdas */
/* grid-column: posición de columna */
/* grid-row: posición de fila */
/* justify-items / align-items: alineación dentro de celdas */

/* ----------------------------
   🎬 ANIMACIONES Y TRANSICIONES
---------------------------- */
/* transition: propiedad, duración, función de tiempo, retraso */
/* transition-property: qué cambia */
/* transition-duration: tiempo */
/* transition-timing-function: ease, linear, ease-in, ease-out */
/* animation-name: nombre de animación */
/* animation-duration: duración */
/* animation-delay: retraso */
/* animation-iteration-count: número de repeticiones (infinite) */
/* animation-direction: normal, reverse, alternate */
/* animation-fill-mode: forwards, backwards, both */

/* ----------------------------
   🖼️ IMÁGENES Y MULTIMEDIA
---------------------------- */
/* object-fit: ajuste de imágenes (cover, contain, fill, none, scale-down) */
/* object-position: posición dentro del contenedor */

/* ----------------------------
   📱 RESPONSIVE Y MEDIA QUERIES
---------------------------- */
/* @media (max-width: 768px) { ... } */
/* @media (min-width: 1024px) { ... } */

/* ----------------------------
   🔒 OTROS
---------------------------- */
/* cursor: tipo de cursor (pointer, default, text, move, wait, help) */
/* visibility: visible, hidden, collapse */
/* clip-path: recorte de elementos */
/* content: usado en ::before y ::after */
/* transform: rotar, escalar, trasladar, inclinar (rotate, scale, translate, skew) */