/* css/pie.css
   Estilos para pie de página reutilizable (pie.php)
   Guardar en css/pie.css
   Modificado: se añadió margen inferior de 20px a #pie_footer
*/

/* Variables */
:root {
  --pie-max-width: 980px;
  --pie-padding: 12px;
  --pie-bg: #000000;
  --pie-text-color: #ffffff;
  --pie-font-family: Arial, Helvetica, sans-serif;
  --pie-font-size: 15px;
}

/* Pie general (no ocupa toda la altura; strip centrado) */
#pie_footer {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--pie-font-family);
  /* antes: margin: 0;  ahora agregamos 20px abajo */
  margin: 0 0 20px 0;
  padding: 0;
}

/* El "cintillo" negro centrado */
#pie_footer .pie_strip {
  display: flex;
  justify-content: center; /* centra el contenedor interno */
  background: var(--pie-bg);
  color: var(--pie-text-color);
  padding: 10px 0;
}

/* Contenedor interior limitado y centrado */
#pie_footer .pie_container {
  width: 100%;
  max-width: var(--pie-max-width);
  padding-left: var(--pie-padding);
  padding-right: var(--pie-padding);
  box-sizing: border-box;
  text-align: center;
}

/* Texto y enlace */
#pie_footer .pie_text {
  margin: 0;
  color: var(--pie-text-color);
  font-size: var(--pie-font-size);
  line-height: 1.2;
  display: inline-block;
  vertical-align: middle;
}

#pie_footer .pie_link {
  color: var(--pie-text-color);
  text-decoration: underline;
  font-weight: 700;
  margin-left: 6px;
}

#pie_footer .pie_link:hover,
#pie_footer .pie_link:focus {
  color: var(--pie-text-color);
  opacity: 0.9;
  text-decoration: none;
  outline: none;
  transition: opacity .12s ease;
}

/* Responsive: ajustar tamaño en pantallas pequeñas */
@media (max-width: 640px) {
  :root { --pie-font-size: 14px; }
  #pie_footer .pie_container {
    padding-left: 10px;
    padding-right: 10px;
  }
}