/* ================================================================
   style.css — Hoja de estilos principal
   Módulo: Mantenimiento y Aseguramiento del Sistema Informático
   Autor: Estudiante — Fecha: 2026

   Se enlaza desde index.html con:
       <link rel="stylesheet" href="style.css">
   ================================================================ */


/* ----------------------------------------------------------------
   1. VARIABLES GLOBALES (:root)
   :root = elemento raíz del HTML. Las variables definidas aquí
   con --nombre se usan en cualquier parte con var(--nombre).
   Cambiar UN valor aquí actualiza TODO el sitio.
   ---------------------------------------------------------------- */
:root {
  --color-fondo:      #ffffff;   /* Fondo general gris muy claro */
  --color-blanco:     #ffffff;   /* Blanco puro para tarjetas y nav */
  --color-acento:     #1a56db;   /* Azul principal — color de marca */
  --color-acento-osc: #1039a8;   /* Azul oscuro para efectos hover */
  --color-texto:      #1e293b;   /* Texto principal (casi negro suave) */
  --color-subtexto:   #64748b;   /* Texto gris para descripciones */
  --color-borde:      #e2e8f0;   /* Líneas y bordes sutiles */
  --color-alerta:     #dc2626;   /* Rojo para alertas importantes */
  --color-exito:      #16a34a;   /* Verde para buenas prácticas */
  --fuente-titulo:    Georgia, 'Times New Roman', serif;
  --fuente-cuerpo:    'Trebuchet MS', 'Lucida Sans', sans-serif;
  --radio:            6px;       /* Redondeo de esquinas global */
  --sombra-suave:     0 2px 8px rgba(0,0,0,0.08);
  --sombra-media:     0 4px 16px rgba(0,0,0,0.13);
  --transicion:       all 0.25s ease; /* Duración de animaciones hover */
}


/* ----------------------------------------------------------------
   2. RESET BÁSICO
   Los navegadores aplican estilos distintos por defecto.
   Este reset los elimina para partir de cero con consistencia.
   box-sizing: border-box → el padding y border NO aumentan
   el tamaño total del elemento (fundamental para layouts).
   ---------------------------------------------------------------- */
*, *::before, *::after {
  margin: 0;              /* Elimina márgenes externos por defecto */
  padding: 0;             /* Elimina relleno interno por defecto */
  box-sizing: border-box; /* Padding y border se incluyen en el ancho */
}

html {
  font-size: 16px;         /* Base: 1rem = 16px en todo el documento */
  scroll-behavior: smooth; /* Scroll animado al navegar con anclas (#id) */
}

body {
  font-family: var(--fuente-cuerpo);
  color: var(--color-texto);
  background-color: var(--color-fondo);
  line-height: 1.7; /* Interlineado — mejora la legibilidad del texto */
}


/* ----------------------------------------------------------------
   3. BARRA DE NAVEGACIÓN (nav)
   position: sticky → el nav se queda pegado al tope de la ventana
   (top: 0) mientras el usuario hace scroll.
   z-index: 1000 → queda en capa alta, encima de todo el contenido.
   ---------------------------------------------------------------- */
nav {
  background-color: var(--color-blanco);
  border-bottom: 3px solid var(--color-acento); /* Línea azul inferior */
  position: sticky;   /* Se pega al tope al hacer scroll */
  top: 0;
  z-index: 1000;
  box-shadow: var(--sombra-suave);
}

/* .nav-inner: centra el contenido con max-width y usa flexbox
   para poner el logo y los links en una fila horizontal */
.nav-inner {
  max-width: 1100px;
  margin: 0 auto;      /* Centra horizontalmente */
  padding: 0 1.5rem;
  display: flex;                   /* Activa Flexbox (fila horizontal) */
  align-items: center;             /* Alineación vertical al centro */
  justify-content: space-between;  /* Logo izq — links der */
  height: 58px;
}

/* Nombre/logo del sitio en la barra de navegación */
.nav-logo {
  font-family: var(--fuente-titulo);
  font-size: 1rem;
  font-weight: bold;
  color: var(--color-acento);
  text-decoration: none; /* Quita el subrayado del enlace */
}

/* Lista de links del menú → convertida en fila con flexbox */
.nav-links {
  list-style: none; /* Quita los puntos/viñetas del <ul> */
  display: flex;
  gap: 0.2rem;      /* Espacio pequeño entre cada link */
}

/* Cada enlace del menú */
.nav-links a {
  text-decoration: none;
  color: var(--color-texto);
  padding: 0.4rem 0.85rem; /* Área clicable más grande */
  border-radius: var(--radio);
  font-size: 0.88rem;
  font-weight: 600;
  transition: var(--transicion); /* Animación suave en hover */
}

/* Al pasar el cursor: fondo azul + texto blanco */
.nav-links a:hover {
  background-color: var(--color-acento);
  color: var(--color-blanco);
}

/* Botón ☰ hamburguesa — visible solo en móvil (display:none aquí) */
.nav-toggle {
  display: none;   /* Se muestra solo en el media query de móvil */
  background: none;
  border: none;
  font-size: 1.6rem;
  cursor: pointer;
  color: var(--color-acento);
}


/* ----------------------------------------------------------------
   4. SECCIÓN HERO (portada)
   linear-gradient: degradado de color entre dos puntos.
   135deg = diagonal de arriba-izquierda a abajo-derecha.
   ---------------------------------------------------------------- */
.hero {
  background: linear-gradient(135deg, #1a56db 0%, #1e3a8a 100%);
  color: var(--color-blanco);
  text-align: center;
  padding: 4.5rem 1.5rem;
}

.hero-icon {
  font-size: 3.5rem; /* Emoji grande decorativo */
  display: block;
  margin-bottom: 1rem;
}

.hero h1 {
  font-family: var(--fuente-titulo);
  font-size: 1.9rem;
  margin-bottom: 0.75rem;
  line-height: 1.3; /* Interlineado reducido para títulos grandes */
}

.hero p {
  font-size: 1rem;
  opacity: 0.9;      /* Ligeramente transparente para jerarquía visual */
  max-width: 580px;
  margin: 0 auto;    /* Centra el párrafo horizontalmente */
}


/* ----------------------------------------------------------------
   5. CONTENEDOR Y SECCIONES
   .contenedor: limita el ancho del contenido y lo centra.
   Cada <section> con id único sirve de ancla para los links
   del menú (href="#id"). scroll-behavior: smooth en <html>
   hace el desplazamiento animado.
   ---------------------------------------------------------------- */
.contenedor {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem; /* Margen lateral en pantallas pequeñas */
}

section {
  padding: 3.5rem 0;
  border-bottom: 1px solid var(--color-borde); /* Línea separadora */
}

section:last-of-type {
  border-bottom: none; /* Sin línea en la última sección */
}

/* Título de sección con barra azul decorativa a la izquierda */
.seccion-titulo {
  font-family: var(--fuente-titulo);
  font-size: 1.55rem;
  color: var(--color-acento);
  margin-bottom: 0.35rem;
  padding-left: 0.9rem;
  border-left: 4px solid var(--color-acento); /* Barra azul izquierda */
}

/* Descripción breve debajo del título de sección */
.seccion-desc {
  color: var(--color-subtexto);
  margin-bottom: 1.75rem;
  padding-left: 1rem;
  font-size: 0.95rem;
}


/* ----------------------------------------------------------------
   6. GRID DE TARJETAS (cards)
   CSS Grid distribuye las tarjetas automáticamente en columnas.
   repeat(auto-fill, minmax(255px, 1fr)):
     auto-fill → crea tantas columnas como quepan
     minmax → mínimo 255px, máximo 1 fracción del espacio disponible
   En pantallas anchas: 3-4 columnas. En móvil: 1 columna.
   ---------------------------------------------------------------- */
.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 1.1rem; /* Espacio entre tarjetas */
}

/* Tarjeta individual */
.card {
  background-color: var(--color-blanco);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  padding: 1.4rem;
  box-shadow: var(--sombra-suave);
  transition: var(--transicion); /* Prepara el hover con transición */
}

/* Al pasar el cursor: la tarjeta sube 3px y sombra se intensifica */
.card:hover {
  transform: translateY(-3px);  /* Efecto de elevación */
  box-shadow: var(--sombra-media);
}

.card-icon {
  font-size: 1.9rem;
  display: block;
  margin-bottom: 0.6rem;
}

.card h3 {
  font-family: var(--fuente-titulo);
  font-size: 1rem;
  margin-bottom: 0.45rem;
}

.card p {
  font-size: 0.9rem;
  color: var(--color-subtexto);
  line-height: 1.6;
}

/* Variantes de borde izquierdo para diferenciar tipos de tarjeta */
.card-azul  { border-left: 4px solid var(--color-acento); }
.card-verde { border-left: 4px solid var(--color-exito); }
.card-rojo  { border-left: 4px solid var(--color-alerta); }


/* ----------------------------------------------------------------
   7. LISTA DE PASOS NUMERADOS (CSS Counters)
   counter-reset: crea un contador con nombre "paso"
   counter-increment: suma 1 al contador por cada <li>
   content: counter(paso): muestra el número en el ::before
   Así los números son automáticos sin escribirlos en el HTML.
   ---------------------------------------------------------------- */
.lista-pasos {
  list-style: none;
  counter-reset: paso; /* Crea/reinicia el contador "paso" */
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.lista-pasos li {
  counter-increment: paso;  /* Suma 1 al contador por cada <li> */
  background-color: var(--color-blanco);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  padding: 0.9rem 1rem 0.9rem 3.8rem; /* Espacio izquierdo para el número */
  position: relative; /* Necesario para el ::before absoluto */
  font-size: 0.93rem;
  box-shadow: var(--sombra-suave);
}

/* Círculo azul con el número del paso (generado por CSS) */
.lista-pasos li::before {
  content: counter(paso); /* Muestra el número actual del contador */
  position: absolute;
  left: 0.95rem;
  top: 50%;
  transform: translateY(-50%); /* Centra verticalmente el círculo */
  background-color: var(--color-acento);
  color: white;
  width: 26px;
  height: 26px;
  border-radius: 50%; /* Forma circular perfecta */
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 0.82rem;
}


/* ----------------------------------------------------------------
   8. TABLA INFORMATIVA
   border-collapse: collapse → une los bordes dobles de celdas
   adyacentes en una sola línea limpia.
   nth-child(even) → aplica a filas 2, 4, 6... (efecto zebra)
   para facilitar la lectura de datos en tablas largas.
   ---------------------------------------------------------------- */
.tabla-wrapper {
  overflow-x: auto; /* Scroll horizontal si la tabla es muy ancha */
}

table {
  width: 100%;
  border-collapse: collapse; /* Une bordes dobles de celdas */
  background-color: var(--color-blanco);
  border-radius: var(--radio);
  overflow: hidden;           /* Recorta esquinas para el border-radius */
  box-shadow: var(--sombra-suave);
  font-size: 0.92rem;
}

/* th: celda de encabezado — fondo azul, texto blanco */
th {
  background-color: var(--color-acento);
  color: var(--color-blanco);
  padding: 0.8rem 1rem;
  text-align: left;
  font-weight: 700;
}

/* td: celda de dato */
td {
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--color-borde);
  vertical-align: top; /* Alinea al tope si hay texto largo */
}

/* Filas pares con fondo gris muy claro (efecto zebra) */
tbody tr:nth-child(even) {
  background-color: #f8fafc;
}

/* Resalta fila al pasar el cursor */
tbody tr:hover {
  background-color: #eff6ff;
}


/* ----------------------------------------------------------------
   CAJAS DE ALERTA Y NOTA
   Bloques destacados para llamar la atención.
   El borde izquierdo de color fuerte es la señal visual clave.
   ---------------------------------------------------------------- */
.alerta {
  background-color: #fef2f2;
  border: 1px solid #fca5a5;
  border-left: 4px solid var(--color-alerta); /* Borde rojo izquierdo */
  border-radius: var(--radio);
  padding: 0.9rem 1.1rem;
  margin-top: 1.5rem;
  font-size: 0.92rem;
}
.alerta strong { color: var(--color-alerta); }

.nota {
  background-color: #f0fdf4;
  border: 1px solid #86efac;
  border-left: 4px solid var(--color-exito); /* Borde verde izquierdo */
  border-radius: var(--radio);
  padding: 0.9rem 1.1rem;
  margin-top: 1.5rem;
  font-size: 0.92rem;
}
.nota strong { color: var(--color-exito); }


/* ----------------------------------------------------------------
   10. FOOTER (pie de página)
   Fondo oscuro con texto gris claro.
   text-align: center centra todo el contenido del footer.
   ---------------------------------------------------------------- */
footer {
  background-color: #1e293b;
  color: #94a3b8;
  text-align: center;
  padding: 2rem 1.5rem;
  font-size: 0.87rem;
  margin-top: 2rem;
}

footer strong {
  color: var(--color-blanco);
}


/* ----------------------------------------------------------------
   11. RESPONSIVE — MEDIA QUERIES
   @media (max-width: 768px) aplica estas reglas SOLO cuando la
   pantalla mide 768px o menos (tablets y teléfonos).
   El menú horizontal se convierte en menú desplegable activado
   por el botón ☰, cuya lógica está en el <script> del HTML.
   ---------------------------------------------------------------- */
@media (max-width: 768px) {

  /* Menú oculto por defecto en móvil */
  .nav-links {
    display: none;
    flex-direction: column; /* Links apilados verticalmente */
    position: absolute;
    top: 58px;              /* Justo debajo del nav */
    left: 0;
    right: 0;
    background-color: var(--color-blanco);
    border-bottom: 2px solid var(--color-acento);
    padding: 0.75rem 1rem;
    gap: 0.2rem;
    box-shadow: var(--sombra-media);
    z-index: 999;
  }

  /* JS agrega la clase .abierto al hacer clic en ☰ */
  .nav-links.abierto {
    display: flex; /* Muestra el menú desplegable */
  }

  /* Muestra el botón  ☰ */
  .nav-toggle {
    display: block;
  }

  /* Título más pequeño en pantallas pequeñas */
  .hero h1 {
    font-size: 1.45rem;
  }

  /* 1 sola columna para tarjetas en móvil */
  .grid-cards {
    grid-template-columns: 1fr;
  }
}